Ícones sociais (barra inicial)

Layout
1

Boa tarde.

Estou com dificuldade na personalização dos ícones. Gostaria de excluir o ícone Facebook azul (padrão da Loja Integrada) da barra inicial, sem perder o quadro social do rodapé. Alguém pode ajudar?

No aguardo. Obrigado!

1 curtida
2

Olá @ramonsd

Nos informe a URL da loja para poder ajuda-lo.

Abs,
Flores | skype: fale.flores

4

@ramonsd

Pode adicionar esse CSS para resolver o problema da barra superior
.barra-inicial .lista-redes ul li:last-child { display: none; }

Para a página de produtos utilize este:
.produto-compartilhar .lista-redes ul li:not(.visible-phone):not(.fb-compartilhar):not(.hidden-phone) { display: none; }

Abs,
Flores | skype: fale.flores

1 curtida
5

Show! Valeu pela força @upper.rocks!

Abs,
Ramon Domingos

1 curtida
7

Olá Ramonsd
como você fez para seus ícones sociais ficarem com uma cor?

Obrigada

8

Olá @betabaixinha,
Basta incluir o seguinte código java:

$('.lista-redes ul').prepend('<li><a href="LINK DA SUA PÁGINA" target="_blank"><i class="fa fa-facebook"></i></a></li>');

Altere o código com o link desejado e a classe do ícone.

Biblioteca de ícones: http://fontawesome.io/3.2.1/icons/

Qualquer dúvida estou a disposição.

2 curtidas
9

Muito obrigada Ramon!!! vou tentar fazer.

10

Ramon, fiquei com uma dúvida:
LINK DA PÁGINA seria da rede social?
e para as outras mídias, eu coloco tipo assim… fa-instagram?

11

Isso, link da sua rede social.

Esse “fa fa-facebook” é o nome do ícone, você pode encontrar vários ícones em: http://fontawesome.io/3.2.1/icons/

Os que eu usei foram: “fa fa-facebook”, “icon-tumblr”, “fa fa-instagram”, “fa fa-youtube”.

Caso queira colocar outra rede social ou link diferente, pode entrar neste site e escolher um ícone personalizado.

1 curtida
12

Olá @ramonsd

  1. acrescente essas regras:

  2. crie esta regra para inibir o posicionamento

Abs,
Flores | skype: fale.flores

1 curtida
13

Muito obrigada Ramon!!!

1 curtida
14

Valeu!

Funcionou para lado direito do cabeçalho (ações da conta) mas o enquadramento da logo continuou igual (lado esquerdo). E reparei que apareceram alguns erros, não sei se foi essa inclusão de código ou se foi outra alteração que fiz. São eles:

  1. Logo fora de alinhamento.
  2. Subcategoria do menu superior ficou com o fundo transparente.
  3. Páginas de marcas ficou com o espaçamento entre o menu e o conteúdo maior que o padrão do site.
  4. O layout do carrinho ficou diferente:
    ** Barra Inicial sumiu.
    ** O espaço entre o cabeçalho e o menu superior dobrou.
    ** E o título “Carrinho Clique em …” ficou colado no menu superior.

Poderia me auxiliar novamente? Agradeço desde já!

Abs.

15

@ramonsd
Estes detalhes citados devem ter sido afetados por outro ajuste que você implementou, de fato o css aplicado acima refere-se apenas aos detalhes da acoes-produto, acoes-conta e box da busca.

Abs,
Flores | skype: fale.flores

16

Boa tarde. Por gentileza, voce tem como me ajudar a criar um icone de BLOG ao lado do icone do Facebook que tenho no topo do site ? Muito obrigado

17

Altere o código com o link do seu blog e inclua na plataforma.

$('.lista-redes ul').prepend('<li><a href="LINK DO SEU BLOG" target="_blank"><i class="icon-globe"></i></a></li>');

18

Muito obrigado Ramonsd. Este código eu incluo no CSS ou HTML ? Eu inclui no CSS porém nao surgiu o icone B de blog ao lado dos icones de redes sociais.
Tenho de inclui-lo no HTML ? Se sim no cabecalho ou rodape ? Obrigado

19

Inclui no HTML.
Local de publicação: Rodapé.
Página de publicação: Todas as páginas.
Tipo: JavaScript.

Agora para trocar ícone basta alterar o “icon-globe” pelo class do ícone desejado. A biblioteca utilizada pela Loja Integrada é esta: http://fontawesome.io/3.2.1/icons/

20

Boa tarde Ramonsd. Eu fui na opcao “incluir codigo HTML” do Loja Integrada, e na parte de baixo da tela “código no rodape” coloquei o codigo $(’.lista-redes ul’).prepend(’

    • ’); Porém nao apareceu nenhum icone em nenhum lugar. Uma duvida que fiquei é, como os icones das redes sociais aparecem no topo da tela, este comando nao deveria ser colocado no cabecalho ao inves de rodape ? Obrigado
    21

    Boa tarde Ramonsd. Reparei tambem em uma coisa: No rodape eu já possuia outros codigos que estavam em HTML e se eu mudar de HTML para JavaScript esta mudanca passa a valer para tudo que existe no rodape correto ? Isto nao pode causar algum problema nos codigos que ja existiam antes e estavam cadastrados como HTML ? Obrigado

    22

    Não sou programador, te repassei o que deu certo no meu caso… Mas vale a pena testar isso que disse, faz sentido @alejandro…