Um site sem ícones parece um muro de texto de 2005. Mas desenhar ícones no Photoshop e andar a mexer em sprites não tem graça nenhuma, especialmente se não for designer.

O Font Awesome resolve este problema desde 2012: é uma biblioteca gratuita com mais de 2000 ícones vetoriais que se comportam como texto normal. Muda a cor no CSS e o ícone muda de cor. Aumenta o tamanho da fonte e ele redimensiona-se sem pixelização ou desfoque.

Na prática, a versão gratuita é suficiente para menus, botões e redes sociais. Se precisar de duotones e mais de 30 000 ícones, existe a versão Pro a partir de $60 por ano. Abaixo estão três formas de adicionar o Font Awesome ao WordPress: da mais simples à instalação manual para quem não tem medo do functions.php.

💡 Visão geral rápida:

• Instale o plugin oficial do Font Awesome a partir do diretório do WordPress; demora um minuto e não requer alterações de código
• Para controlo manual, ligue o Font Awesome via CDN ou Kit no functions.php do seu tema filho
• Se usar o Elementor, os ícones já vêm integrados e não é necessário nenhum plugin separado
• Após a ligação, altere o tamanho, a cor e a animação do ícone através de CSS ou classes prontas a usar

O que é o Font Awesome

O Font Awesome é uma fonte de ícones: em vez de letras, contém símbolos de ícones. O navegador renderiza-os como gráficos vetoriais, pelo que os contornos se mantêm nítidos em qualquer ecrã e em qualquer escala. Nada de PNGs, sprites ou srcset.

A biblioteca está dividida em duas partes. A versão gratuita inclui cinco estilos: Solid, Regular, Brands, Duotone e Sharp. A Pro adiciona Thin, Light e dezenas de milhares de ícones, além da possibilidade de carregar os seus próprios SVGs através do Kit. Para um site de cartão de visita ou blogue típico, a versão gratuita cobre a grande maioria das tarefas: setas, redes sociais, pesquisa, carrinho, caixas de seleção.

A principal vantagem sobre os ícones rasterizados é o controlo total através de CSS. Cor, tamanho, sombra, rotação, animação: tudo se define com classes, sem qualquer edição gráfica.

Método 1: plugin oficial (recomendado)

O caminho mais seguro é instalar o plugin oficial do Font Awesome no WordPress.org. É lançado pela mesma equipa que cria a própria biblioteca. O plugin atualiza-se em sincronia com os novos lançamentos de ícones e não depende do seu tema.

Como instalar:

Vá a Plugins → Adicionar Novo. Na barra de pesquisa, escreva "font awesome" e prima Enter.

Clique em Instalar Agora e, em seguida, em Ativar.

Pronto. Após a ativação, aparece um item Font Awesome no menu Configurações, onde pode alternar a origem dos ícones (CDN ou Kit), ativar a compatibilidade com a versão quatro e executar o verificador de conflitos.

O plugin adiciona um bloco separado "Font Awesome Icon" ao editor de blocos. Clique nele e abre-se uma pesquisa em toda a biblioteca. Selecione um ícone, clique em "Inserir" e ele aparece no texto como um SVG. O estilo está na barra lateral do bloco: tamanho, cor, rotação.

Para o editor clássico, funciona um shortcode:

1
[icon name="download" prefix="fa-solid"]

Ou HTML puro:

1
<i class="fa-solid fa-download"></i>

Se tiver uma conta Pro, crie um Kit em fontawesome.com, copie o API Token e cole-o nas definições do plugin. Depois disso, o Icon Chooser também mostrará os ícones Pro.

Método 2: instalação manual via functions.php

Este método destina-se a quem quer controlar todos os recursos carregados no site ou evitar plugins extra. Funciona através de um tema filho, para que a atualização do tema principal não apague as suas alterações.

Criar um tema filho

Na pasta wp-content/themes/, crie um diretório com o sufixo -child (por exemplo, astra-child). Dentro, crie dois ficheiros.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Vá a Aparência → Temas e ative o tema filho.

Ligar o Font Awesome via CDN

Adicione este código ao functions.php do seu tema filho:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Este hook carrega a versão gratuita a partir do CDN cdnjs, o CDN público mais fiável para o FA 6. O número 6.7.2 é a versão à data de junho de 2026; verifique a versão atual na página do pacote no cdnjs e substitua pela mais recente.

Alternativa: Kit do Font Awesome

O Kit dá acesso aos ícones Pro e carrega automaticamente apenas os estilos usados na página, resultando em menos kilobytes desnecessários.

Registe-se no site do Font Awesome, crie um Kit, copie o código de incorporação e cole-o no header.php do seu tema filho antes de </head>:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

A desvantagem do Kit é que o plano gratuito está limitado a 10 000 visualizações de página por mês. Para um site com mais tráfego, utilize o CDN ou o Pro.

O editor de temas integrado (Aparência → Editor de Ficheiros do Tema) permite editar o functions.php diretamente do painel de administração. No entanto, é mais seguro trabalhar por FTP ou pelo gestor de ficheiros do alojamento: um erro de digitação no código PHP bloqueia o site e, sem acesso aos ficheiros, não terá forma de o restaurar.

Método 3: através do Elementor ou outro page builder

Se já utiliza o Elementor, não precisa de um plugin separado para o Font Awesome; o construtor de páginas inclui a biblioteca de raiz.

Em qualquer widget com ícone (Ícone, Caixa de Ícone, Lista de Ícones), clique no ícone e abre-se uma biblioteca com pesquisa em todos os estilos gratuitos. A cor, o tamanho, a sombra e os efeitos de hover são configurados na barra lateral, sem uma única linha de CSS.

O mesmo se aplica ao SeedProd, Beaver Builder e Divi. Verifique as definições do seu construtor de páginas: quase todos os construtores visuais populares para WordPress já incluem o Font Awesome no seu núcleo.

Como alterar estilos de ícones

Depois de ligar o Font Awesome, controla os ícones exclusivamente através de classes e CSS. Não é necessário editar diretamente os ficheiros SVG.

Tamanho

O tamanho do ícone é definido com classes prontas a usar. Uma classe torna o ícone um terço maior, outra duplica-o, outra triplica-o, e assim sucessivamente até um aumento de dez vezes. Consulte os valores exatos para todas as classes no site do Font Awesome.

Exemplo de um ícone com o tamanho triplicado:

Exemplo de um ícone com o tamanho triplicado:

1
<i class="fa-solid fa-download fa-3x"></i>

Rotação e inversão

• fa-rotate-90, rotação de 90°
• fa-rotate-180, rotação de 180°
• fa-rotate-270, rotação de 270°
• fa-flip-horizontal, espelhamento horizontal
• fa-flip-vertical, espelhamento vertical

Animação

Duas opções, ambas através de classes:

• fa-spin, rotação suave (adequada para spinners de carregamento)
• fa-pulse, rotação em oito passos (efeito pulsante)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Cor

A cor do ícone é herdada do texto pai. Para definir a sua própria, utilize uma regra CSS:

1
.fa-download {
2
    color: #27ae60;
3
}

A forma mais fácil de adicionar esse CSS é através de Aparência → Personalizar → CSS adicional. As alterações são aplicadas imediatamente e são visíveis em tempo real.

Ícone através de pseudoelemento

Quando um ícone deve ser anexado a um elemento sem marcação extra, utilize ::before ou ::after no CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

O código \f08e é o identificador Unicode do ícone. Pode encontrá-lo na página do ícone específico em fontawesome.com, onde está listado com o respetivo nome.

Onde obter ícones

Abra fontawesome.com/icons, escreva uma palavra-chave na pesquisa e escolha um estilo. Na página do ícone encontrará o snippet HTML, o Unicode e a lista de estilos disponíveis. Copie e cole onde for necessário.

Uma nota sobre o tutorial em vídeo

Se prefere ver em vez de ler, aqui está um tutorial sobre como adicionar ícones Font Awesome a um menu do WordPress:

Depois de ver, volte ao texto: a seguir encontram-se pormenores não abordados no vídeo.

⁉️🤔 Perguntas frequentes

Preciso de pagar pelo Font Awesome?

A versão gratuita cobre as necessidades da grande maioria dos sites: mais de 2000 ícones em cinco estilos, incluindo ícones de marcas (Facebook, Twitter, Instagram e centenas de outros). A versão Pro custa a partir de $60 por ano e adiciona as famílias Thin, Light, Sharp, Duotone em todos os estilos e a possibilidade de carregar os seus próprios SVGs. Pagar faz sentido se vende ícones como parte de um produto ou se precisa especificamente de duotones. O plugin Font Awesome no WordPress.org é completamente gratuito; os ícones Pro são ligados através de um API Token nas definições do mesmo plugin, não sendo necessário comprar ou instalar nada em separado.

Que método de ligação devo escolher?

Para principiantes e sites típicos, o plugin oficial. Instala-se em dois cliques, tem pesquisa de ícones integrada no editor e um scanner de conflitos. A instalação manual via CDN justifica-se se estiver a minimizar os plugins no seu site e souber exatamente em que ficheiro adicionar o wp_enqueue_style. O Kit do Font Awesome é um compromisso: fácil de ligar sem um plugin, mas com um limite gratuito de 10 000 visualizações.

O que devo fazer se os ícones não aparecerem?

Primeiro, execute o Scanner de Deteção de Conflitos nas definições do plugin Font Awesome. Na maioria das vezes, o problema é o tema ou outro plugin estar a carregar a sua própria versão do Font Awesome, causando um conflito de versões. O scanner encontrará a origem do conflito e o plugin oferecer-se-á para a bloquear. O segundo caso comum é um erro de sintaxe: verifique se está a usar o prefixo fa-solid e não fa (que é a sintaxe da antiga versão quatro).

Posso usar o Font Awesome sem o WordPress?

Sim, o Font Awesome não está vinculado ao WordPress. Ligue o link do CDN no <head> de qualquer documento HTML e insira os ícones com a tag <i class="fa-solid fa-name"></i>. Funciona com React, Vue, Laravel, HTML simples e até geradores de PDF. Em fontawesome.com/docs existem instruções para uma dezena de plataformas.

Porque é que o Font Awesome é melhor do que outras bibliotecas de ícones?

Dois argumentos principais: o tamanho da comunidade e a compatibilidade. O Font Awesome é usado por milhões de sites, por isso a documentação está traduzida em uma dezena de línguas e as respostas para qualquer problema encontram-se em segundos através de pesquisa. Segundo, o plugin oficial para WordPress com resolução automática de conflitos: nem o Material Icons nem o Bootstrap Icons oferecem isto.

Vale o esforço: o que escolher para a sua tarefa

Se leu até aqui, a tabela abaixo vai poupar-lhe tempo:

Verifique se, após a ligação, os ícones são exibidos corretamente em diferentes navegadores e em dispositivos móveis. Se notar oscilações ou substituição de ícones, execute o scanner de conflitos na secção "Resolução de problemas" das definições do plugin. O problema fica quase sempre resolvido com um botão.