Como adicionar ícones impressionantes de fontes ao WordPress – o guia completo

É disso que trata este guia. Ao terminar de ler, você saberá exatamente como:

• Adicione manualmente a folha de estilo Font Awesome ao WordPress
• Adicione o Font Awesome ao WordPress com um plugin gratuito
• Insira e estilize ícones Font Awesome de várias maneiras diferentes

Vamos cavar…

Por que você deve dedicar um tempo para adicionar ícones impressionantes de fonte ao WordPress

Os ícones Font Awesome são incríveis porque, como o nome sugere, são uma fonte de ícone, em vez de imagens. Isso significa que você pode fazer coisas legais como:

• Redimensione sem perder qualidade porque os ícones são vetores
• Altere cores, adicione animação e use outras manipulações CSS

Tudo isso para dizer, os ícones do Font Awesome são muito superiores ao uso de apenas uma imagem estática.

Primeiro, mostrarei duas maneiras diferentes de adicioná-los ao seu site. Em seguida, mostrarei como você pode estilizar e manipular seus ícones (não importa qual método você escolha).

Como adicionar manualmente ícones impressionantes de fonte ao WordPress

Se o pensamento de investigar o código do seu tema o assusta, recomendo que você pule para a próxima seção, onde mostrarei como adicionar ícones do Font Awesome ao WordPress usando um plug-in gratuito.

Caso contrário, eu gosto deste método para uma maneira agradável e leve de colocar o Font Awesome em funcionamento.

Basicamente, tudo o que você precisa fazer é adicionar a folha de estilo Font Awesome ao seu tema WordPress. Então, você pode começar a inserir ícones do Font Awesome e estilizá-los como quiser.

Veja como funciona todo o processo, passo a passo:

Etapa 1: enfileirar a folha de estilo impressionante da fonte no seu tema do WordPress

Como eu disse, seu primeiro passo é adicionar a folha de estilo Font Awesome CSS ao seu tema WordPress. Embora você possa obter isso diretamente do site Font Awesome, meu método preferido é usar a versão hospedada no Bootstrap CDN.

Atualmente, esse link é:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Mas isso mudará à medida que o Font Awesome lançar novas versões. Portanto, é uma boa ideia atualizar o link com regularidade para a versão mais recente (embora as versões mais antigas continuem funcionando).

Para adicionar esta folha de estilo ao WordPress, você precisa enfileirar no arquivo functions.php do seu tema filho . Embora o método básico de adicionar CSS seja colocar o link no cabeçalho, é uma prática recomendada usar a função especial de enfileiramento do WordPress em vez de colocar a folha de estilo diretamente no cabeçalho.

Além disso, usar um tema filho garante que suas alterações não sejam substituídas se você precisar atualizar seu tema.

Como seguir as práticas recomendadas de código do WordPress é uma coisa boa, definitivamente recomendo que você use um tema filho e a função de enfileiramento.

Bom, veja como fazer:

Vá para Appearance → Editor e selecione o arquivo functions.php para seu tema filho.

Em seguida, cole este código:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

Certifique-se de salvar suas alterações e pronto! Não é muito doloroso, certo?

Etapa 2: inserir ícones impressionantes de fonte

Depois de enfileirar a folha de estilo, você pode inserir ícones do Font Awesome em seu site indo para a pesquisa de ícones do Font Awesome e encontrando um ícone que deseja inserir:

Quando você clica em um ícone, o Font Awesome fornece o código necessário para usar o ícone:

Tudo o que você precisa fazer é colocar esse código na guia Texto do Editor do WordPress para adicionar um ícone ao seu site.

E é isso! Você adicionou com sucesso o suporte Font Awesome ao WordPress. Agora, tudo o que resta é aprender como estilizar os ícones Font Awesome no seu site WordPress.

Mas antes de mostrar isso, quero falar sobre o método do plugin para adicionar o Font Awesome Support. Sinta-se à vontade para pular adiante se você optou pelo método manual sobre o método do plug-in.

Como adicionar ícones impressionantes de fonte ao WordPress com um plug-in

Se você preferir usar um plug-in em vez de enfileirar manualmente a folha de estilo Font Awesome, há uma opção gratuita sólida listada no WordPress.org chamada Better Font Awesome.

Além de sempre adicionar a folha de estilo mais recente ao seu site, o Better Font Awesome também:

• Permite usar códigos de acesso para incorporar ícones do Font Awesome.
• Fornece um menu suspenso no TinyMCE Editor para inserir ícones.

Se você planeja usar regularmente os ícones do Font Awesome, essas duas ferramentas podem facilitar sua vida. Mas para uso pouco frequente, acho que o método manual é a opção mais simples porque é a mais leve.

Etapa 1: instalar e ativar o plug-in

Para adicionar o Font Awesome, tudo o que você precisa fazer é instalar e ativar o plugin. Não há realmente mais nada.

Embora exista um painel de configurações básicas que você pode acessar acessando Configurações → Better Font Awesome , você é totalmente livre para deixar tudo como padrão.

Etapa 2: inserir ícones impressionantes de fonte

Para inserir ícones do Font Awesome com o plugin, você tem duas opções diferentes:

• Use o código do site da Font Awesome como demonstrei na seção anterior.
• Use códigos de acesso, que podem ser gerados a partir de um menu suspenso.

Como já mostrei o primeiro método na seção anterior, vou dar uma olhada rápida no gerador de shortcode suspenso.

Ao criar uma nova postagem ou página, você notará um novo botão Inserir ícone ao lado do botão Adicionar mídia . Se você clicar nele, verá todos os ícones do Font Awesome disponíveis, bem como uma opção para filtrar os resultados:

Tudo o que você precisa fazer é clicar no ícone escolhido e o plug-in inserirá o código de acesso adequado:

E isso é tudo o que há para isso!

Agora que você tem suporte a ícones do Font Awesome, vamos nos aprofundar em algumas maneiras pelas quais você pode estilizar e manipular seus ícones do Font Awesome.

Como estilizar ícones impressionantes de fontes e alterar tamanhos

Não importa qual método você usou para adicionar o Font Awesome ao WordPress, você usará os mesmos princípios básicos para estilizar seus ícones.

Além disso, esses comandos funcionam se você estiver usando códigos de acesso ou o código de incorporação do site do Font Awesome.

A maioria dessas dicas são extraídas diretamente da página de exemplos do Font Awesome, então você não precisa se preocupar com compatibilidade.

Alterar o tamanho dos ícones impressionantes da fonte

Vamos começar com um básico – aumentar o tamanho dos ícones do Font Awesome. Por padrão, os ícones são bastante pequenos, então essa é definitivamente uma situação que você provavelmente encontrará.

Para aumentar o tamanho de um ícone, você pode usar qualquer um destes modificadores:

• fa-lg – aumenta o tamanho em 33%
• fa-2x – tamanho duplo
• fa-3x – tamanho triplo
• fa-4x – …
• fa-5x – …

Para usar esses modificadores, basta adicioná-lo após o nome do ícone (mas dentro das aspas) para o código e dentro das aspas de classe para o shortcode. Aqui está um exemplo de triplicar o tamanho de um ícone para ambos os métodos de incorporação:

• <i class=”fa fa-download fa-3x ” aria-hidden=”true”></i>
• [icon name=”baixar” class=” fa-3x “]

Por exemplo, isso:

Torna-se isso no front-end:

Girar ícones impressionantes de fonte

Você também pode girar facilmente os ícones do Font Awesome para alterar sua orientação.

Aqui estão os modificadores para rotação. Você pode usar qualquer um desses exatamente da mesma forma que os modificadores de tamanho acima:

• fa-rotate-90 – gira 90 graus
• fa-rotate-180 – gira 180 graus
• fa-rotate-270 – gira 270 graus
• fa-flip-horizontal – vira o ícone ao longo de seu eixo horizontal
• fa-flip-vertical – vira o ícone ao longo de seu eixo vertical

Adicionar animação aos ícones impressionantes da fonte

Você também pode adicionar algumas animações básicas aos seus ícones. Font Awesome oferece dois modificadores diferentes para adicionar rotações:

• fa-spin – adiciona uma rotação suave
• fa-pulse – faz o ícone girar em 8 passos diferentes

Essas animações combinam melhor com ícones circulares. Se você usar outros ícones de formato estranho, o efeito pode parecer um pouco estranho.

Alterar a cor do ícone impressionante da fonte

Por fim, mostrarei como alterar a cor dos ícones do Font Awesome. Infelizmente, não há modificadores embutidos para isso. Em vez disso, você precisará usar algum CSS personalizado.

Mas não se preocupe – é super simples.

Tudo que você precisa é deste pequeno código:

.fa-NAME {
color: COLOR;
}

Onde fa-NAME é o nome real do seu ícone e COLOR é a cor para a qual você deseja alterá-lo.

Para ficar com o ícone de download de nossos exemplos anteriores, veja como você o deixaria vermelho:

Você pode facilmente adicionar CSS personalizado indo em Aparência → Personalizador → CSS Adicional .

Encerrando as coisas

Os ícones do Font Awesome podem levar alguns minutos para serem configurados. Mas uma vez que você os instalou, eles estão lá para sempre. A partir de então, tudo o que você precisa fazer para inserir e estilizar ícones individuais do Font Awesome é seguir as etapas acima.

Apenas esteja ciente – se você usar o método manual, você vai querer ir periodicamente e atualizar o link para a folha de estilo para ficar a par das versões mais recentes.