como adicionar ícones de mídia social no wordpress sem plug-ins

Quer adicionar ícones de mídia social ao seu site WordPress sem um plugin?

Há muitos posts que mostram como adicionar ícones usando fontes incríveis, mas vou mostrar uma maneira muito mais simples sem ter que adicionar nenhum ícone externo.

Se você leva a sério a velocidade da página, vai adorar isso.

Dashicons é a fonte oficial de ícones do WordPress. Eles aparecem na barra lateral esquerda de cada back-end do administrador do site WordPress.

como adicionar ícones de mídia social no wordpress sem plug-ins

Usaremos esses ícones em vez de ícones externos. Isso irá liberar o navegador de solicitar arquivos adicionais.

Basta seguir estas etapas:

Passo 1

Adicione o widget HTML personalizado na barra lateral ou rodapé. Você pode gerenciar widgets em Painel >>> Aparência >>> Widgets.

Passo 2

Cole este código na caixa de conteúdo


Neste código, exibimos apenas os ícones do Facebook e do Twitter.
Para adicionar mais ícones, você precisará personalizar três partes nele.

href é o link para sua página social
aria-label é um texto que descreve o link

Terceiro e o mais importante é a classe = ”dashicons dashicons-facebook-alt”

Cada fonte nos Dashicons possui uma classe específica que é usada para exibir o ícone. Podemos encontrar a classe de um ícone clicando nele

como adicionar ícones de mídia social no wordpress sem plug-ins

Substitua esta peça pela que deseja usar

Por exemplo, substitua dashicons-facebook-alt por dashicons-coração e o ícone de coração será exibido.

Etapa 3.

Adicione este CSS no arquivo Style.css dos temas filhos ou na opção CSS adicional do Customizer

.social-link-container {display: flex; } .social-link-container .social-link {padding: 3px; margem direita: 10px; } .dashicons {tamanho da fonte: 30px; cor: #fff; largura: 40px; altura: 40px; raio da borda: 50%; display: flex; justificar-conteúdo: centro; alinhar-itens: centro; }

Este código acima irá adicionar todos os atributos dos ícones, exceto a cor. Use o código abaixo para adicionar cor aos ícones que só ficarão visíveis então.

.dashicons-facebook-alt {background: # 1877F2; } .dashicons-twitter {background: # 1DA1F2; }

Se você adicionar mais ícones, poderá adicionar uma cor de fundo diferente a cada ícone usando sua classe e o CSS acima.

Quer adicionar um efeito de foco simples? Adicione isso ao seu CSS se quiser mostrar um efeito de foco 'Crescer em'

.dashicons: hover {-webkit-transform: scale (1.2); -ms-transform: escala (1,2); transformar: escala (1,2); }

É isso! Agora limpe o cache do site e verifique seu widget, ele será exibido assim

como adicionar ícones de mídia social no wordpress sem plug-ins

Se você seguir exatamente as etapas, fará com que funcione.
Se não, comente abaixo, e eu posso te ajudar a resolver.

Deixe um comentário