Design

CSS: como usar os ícones do FontAwesome

Google+ Pinterest LinkedIn Tumblr

O Font Awesome é um conjunto de ícones baseados em webfont e CSS, lançado em 2012 pelo desenvolvedor Dave Gandy. Desde então, conquistou grande espaço, virando referência visual em incontáveis projetos. A proposta é ótima: por que usar ícones, se podemos carregar uma webfont com um set espetacular deles? E prontos para os mesmos efeitos e ajustes do próprio texto?

O melhor é: usar o Font Awesome não custa nada. Há uma versão premium, com ainda mais ícones, mas o pacote grátis dá conta do recado quase sempre. A ferramenta está, na data em que este post é escrito, em sua versão 5.3. É nela que vamos nos basear para mostrar como usar os ícones do Font Awesome em seus websites e blogs.

O que você precisa?

  1. Um site (=D) com permissão de alterar arquivos da raiz.
  2. Conhecimento básico de CSS e HTML.

Instalação e teste

Primeiro, siga ao site do Font Awesome. Lá, localize o link do menu, How to Use.

Vamos seguir com o uso grátis, “Free“.  É a opção padrão, assim como “All“, que carrega todos os ícones do set gratuito em seu site. Copie o código da caixa:

O que é esse código?

É uma tag de HTML. Colada no header deu seu tema, ela faz a “chamada” do CSS do Font Awesome, hospedado num CDN e apontando para a webfont também em CDN (um armazenamento em nuvem dos arquivos).

Onde é o header do seu site?

O header é o cabeçalho, também parte da marcação HTML. Na maioria dos temas WordPress (pra não dizer todos), fica num arquivo chamado header.php. Procure na pasta do tema que usa.

No caso do meu site de teste, usando o tema Twenty Seventeen, está na pasta wp-content/themes/twentyseventeen.

Importante: para não perder as mudanças toda vez que o tema for atualizado, faça as alterações num tema-filho. De novo no caso do Twenty Seventeen, o que fiz foi copiar o arquivo header.php para a pasta do tema-filho, então o caminho ficou wp-content/themes/twentyseventeen-child. Saiba mais sobre Temas-Filhos.

O código deve ficar entre as head do header. Confuso? Nem tanto.

Abra o arquivo header.php. Procure pelo fechamento da tag head, </head>:

Pronto, você copiou o código que fará esse ícone aparecer em seu site. Cole o código que pegou do Font Awesome ANTES daquela marcação. Assim:

Salve o arquivo, e se não estiver o editando já no servidor, envie para lá. Limpe todos os caches para garantir que o header será carregado corretamente.

Para testar, vamos inserir um ícone de modo bem direto, num post. Antes, você precisa da marcação/código que gera aquele ícone.

Onde pego o código?

Do site do Font Awesome. Para escolher um ícone, clique em “Icon“, na parte superior do site. Os ícones mais escuros fazem parte da versão grátis.

Para pesquisar um ícone, digite um termo de busca (em inglês) na caixa. Se pesquisar por “award“, por exemplo, vai encontrar um ícone de certificado:

Clique no ícone. Na página que será aberta, clique na parte indicada na imagem (o código que muda de cor ao passar o mouse):

Crie uma nova página no seu site WordPress. Editando no modo de Texto, cole isso:

<i class=”fas fa-award”></i>

Visualize as alterações sem voltar ao modo Visual (ou o WordPress vai apagar a marcação automaticamente). Se aparecer o ícone…

…deu tudo certo, e seu site está pronto para mostrar ícones do Font Awesome. Senão, repasse as etapas; certifique-se de ter esvaziados todos os caches (navegador, plugins, CDN, etc).

Usando no tema

Esse foi um uso incomum e para mero teste. Digamos que você quer exibir um ícone do Font Awesome no menu superior do seu site.

Siga pelo caminho Aparência > Menus no seu painel do WordPress.  Selecione o menu e abra a opção clicando sobre ela. No meu caso, tinha um item chamado “Technology” no menu; vou acrescentar ali um ícone.

Menu do WordPress no modo de edição.

Como mostrado antes, copie uma das marcações de ícone do Font Awesome e cole antes do texto do menu — nesse caso, antes do “Technology”. Resolvi colocar o ícone do laptop, mas você pode usar qualquer um do pacote gratuito. Ficou assim:

<i class="fas fa-laptop"></i> Technology

Salve o menu e teste. Se deu tudo certo…

Esse é só um uso possível. As marcações podem ser aplicadas dentro do HTML de qualquer forma.

Font Awesome como SVG

Vimos o uso da versão em webfont do Font Awesome. Alguns usuários podem precisar de ícones como SVG (gráficos vetoriais) em vez de marcações i de HTML. Há controvérsia quanto à semântica do i como ícone, mas fato é que tem sido assim há algum tempo.

Ícones em SVG têm vantagens específicas — poucas, mas têm. Se pretende aplicar transformações de CSS como rotação e escala, por exemplo, terá que alterar o código colado lá no header. Antes de copiá-lo do site do Font Awesome, clique no botão “SVG & JS”:

Copie o código da caixa escura e cole-o no header do seu tema, exatamente como mostrado antes.

O resto é igual. Veja no inspetor de código do Chrome como o ícone passa a ser um objeto SVG:

Por enquanto é isso. Se tiver dúvida sobre o Font Awesome, comente.

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

1 Comentário

Deixe um Comentário

Pin