Como usar fontes incríveis em seu site WordPress

Quando tiver a opção de usar um ícone vetorial ou uma imagem estática, é uma boa ideia escolher o vetor. Eles são pequenos, carregam rapidamente e podem ser redimensionados em qualquer tamanho sem perda de resolução. Font Awesome é uma excelente biblioteca de ícones vetoriais que você pode usar em seus sites, e eles provavelmente têm quase qualquer formato ou marca de que você precisa. E o melhor de tudo? É grátis. Em segundo lugar, é fácil.

Inscreva-se no nosso canal no Youtube

Ícones impressionantes de fontes do WordPress

Usar a biblioteca Font Awesome em seu site WordPress é relativamente fácil. Depois de seguir essas etapas simples, você será capaz de reduzir o tempo de carregamento da página e criar alguns designs realmente limpos e nítidos usando esses ícones como parte do seu trabalho.

Uma coisa a lembrar é que (na maioria das vezes) os ícones Font Awesome serão entregues em seu site como fontes reais. Daí o nome Font Awesome. Você poderá estilizá-los e manipulá-los de todas as maneiras que normalmente faria com um caractere de fonte, usando CSS via @ font-face e a família de fontes Font Awesome.

Por isso, você não precisa se preocupar com o tamanho ou espaçamento de cada navegador ou janela de visualização individual. Se parece ótimo, é porque é. E é assim que você faz:

Instalando Font Awesome

Embora haja uma maneira manual de instalar e usar o Font Awesome, há uma maneira melhor para os usuários do WordPress. O pessoal da FA lançou um plugin oficial para WordPress Font Awesome e funciona lindamente.

Com o plug-in instalado e ativado, você agora tem acesso ao shortcode [[nome do ícone]], bem como aos trechos de HTML. Contanto que você mantenha a lista de ícones FA acessível para saber exatamente de que ícone você precisa. Você verá na página de configurações do plugin (encontrada em Configurações - Fonte incrível ) como as coisas são configuradas por padrão. Em geral, eles são bons para manter e usar. A maioria das pessoas não precisa de mais nada.

A opção Método é provavelmente a mais importante para a maioria das pessoas. Você pode alternar entre Webfont ou SVG . Enquanto o SVG oferece mais poder e recursos (como transformações de energia e mascaramento), o Font Awesome CDN fornecerá os ícones como arquivos SVG e não como uma fonte. Embora isso seja melhor em alguns aspectos, o SVG não é reconhecido por tantos navegadores, nem o WordPress sempre funciona bem com imagens SVG. Portanto, sugerimos jogar pelo seguro com a versão da webfont.

O mesmo acontece com o Font Awesome: se você não tem certeza da diferença ou não sabe por que precisa usar o SVG, é provavelmente mais fácil manter o método da webfont padrão.

Para usar os ícones Font Awesome em seu site WordPress, é simples. Basta adicionar <i class = ”fab fa-wordpress”> </i> em qualquer lugar onde você quiser que um ícone apareça. Certifique-se de verificar a biblioteca de ícones para saber qual nome inserir.

Nota: os códigos de acesso no plug-in são aleatórios. Alguns ícones são renderizados perfeitamente bem, enquanto outros aparecem em branco. Recomendamos que você se atenha à inserção de HTML, a menos que veja que o shortcode funciona para você. Veja abaixo um exemplo do exemplo do WordPress acima sem renderização, enquanto o ícone da câmera o faz.

E você está pronto. O plugin Font Awesome WordPress é ótimo para pessoas que não se sentem confortáveis ​​em acessar seus temas ou arquivos para inserir o código que de outra forma seria necessário. No entanto, se você se sentir confortável em fazer isso, siga estas instruções para obter os ícones Font Awesome em seu site.

Instalando ícones impressionantes de fontes manualmente

A primeira coisa que você precisa fazer é acessar o site Font Awesome. A partir daí, clique no botão Começar a usar gratuitamente . Eles oferecem planos pagos para pessoas que têm sites de alto tráfego e precisam de uma solução corporativa, mas o público em geral pode se safar com a versão gratuita. Você obtém 1.500 ícones gratuitamente e mais de 5.000 variantes no plano Pro.

A próxima etapa é simplesmente copiar / colar. Mas você vai querer ter certeza de que destacou a opção webfont, assim como discutimos antes.

A maioria dos temas tem um local para você inserir o código no <head> do site automaticamente. No caso da Divi, por exemplo, você iria em Theme Options - Integrações e colaria este código no campo rotulado Add code to the Head of your blog .

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Ao clicar em salvar, você pode começar a incluir qualquer um dos ícones que desejar, assim como fizemos acima. Apenas, você não tem acesso ao shortcode fazendo isso.

Se o seu tema não suporta integração de código

Se você não conseguir encontrar um ponto como este em seu tema, também é tão fácil fazer manualmente. Você terá que cavar nos arquivos principais do seu tema para fazer isso, no entanto, é uma cópia / colagem muito rápida e (geralmente) muito segura de fazer. Vá para Appearance - Editor em seu painel WP e encontre o arquivo header.php .

Encontre a linha onde </head> está escrito e, antes dela, você precisa colar o mesmo código do Font Awesome. Pressione Atualizar arquivo e você poderá começar a usar os ícones FA imediatamente. Novamente, você não obtém um shortcode instalando Font Awesome desta forma.

Além disso, lembre-se de que sempre que editar um arquivo de tema, você deseja usar um tema filho. Ao fazer isso, você evita que as alterações feitas sejam sobrescritas quando o tema for atualizado.

Mais opções para instalação

E se você tiver outras necessidades mais específicas para o Font Awesome, eles oferecem uma série de maneiras de obter acesso à biblioteca. De instalações de NPM e Yarn à integração Sketch e React, eles têm uma tonelada de opções se você precisar para mais do que WordPress.

Ícones incríveis de estilização de fontes

Agora que você os instalou, é hora de fazer os ícones aparecerem. Você pode fazer isso usando CSS porque cada um dos ícones é governado por uma classe CSS. Os dois estilos mais usados ​​são cor e tamanho. Você pode incluir o estilo CSS em suas folhas de estilo ou pode fazê-lo embutido. Em geral, você pode querer usar um estilo embutido porque ícones como esses não tendem a ser universais em um site inteiro.

O site Font Awesome tem exemplos de como fazer isso. Eles mostram o tamanho usando seu ícone de iglu e a classe adicional como fa-xs ou fa-xl ou fa-2x para tamanhos específicos.

Além disso, se você precisa que o ícone seja relativo a um tamanho específico e os valores absolutos não funcionam, você pode colocá-lo em seu próprio <div> para fazê-lo funcionar dentro de suas restrições.

<div style="font-size: 0.5rem;">
  <i class="fas fa-igloo fa-10x"></i>
</div>

Empacotando

E é isso! Incrível, certo? Esteja você usando o plugin Font Awesome WordPress ou inserindo o código manualmente, não são necessários mais do que algumas etapas para colocar seu site em funcionamento. Font Awesome é popular por um motivo, e parte disso vem de sua facilidade de uso. Então vá lá e seja incrível!

Qual é a sua maneira favorita de usar os ícones Font Awesome?

Imagem em destaque do artigo cortesia de Font Awesome