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 is the official WordPress icon font. They appear in the left sidebar of every WordPress site admin backend.

We will use these icons instead of external icons. This will free up the browser from requesting additional files.

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

In this code, we display the Facebook and Twitter icons only.
To add more icons, you will need to customize three parts in it.

href is the link to you social page
aria-label is text that describes the 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

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

If you follow the steps exactly, you will get it working.
If not, then comment down below, and I can help you to solve it.