Usando Font Awesome sem adicionar tags HTML

Usando Font Awesome sem adicionar tags HTML

Alguns ícones do Font Awesome.

Alguns ícones do Font Awesome.

Das bibliotecas de ícones disponíveis na Internet, cada vez mais tenho usado o Font Awesome. Com mais de 470 ícones na versão 4.2 e customizável por CSS, é fácil de usar adicionando uma linha no bloco <head> e tags <i> com as classes dos ícones.

<!-- Dentro do bloco head -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tag i com classe para o ícone de RSS -->
<i class="fa fa-rss-square fa-5x"></i>

Resultado:

E se não for possível adicionar elementos ao HTML?

Então, usando a pseudo-classe :before no CSS, adicionam-se os ícones aos elementos HTML já existentes.

/* CSS para o ícone de vídeo */
.video:before { 
  content: "\f03d"; 
  font-family: FontAwesome;
}

O código acima, por exemplo, adiciona o ícone antes do elemento com a classe video. Cor, tamanho da fonte e outras propriedades também podem ser customizadas no CSS.

E, de forma semelhante, pode-se usar a pseudo-classe :after para adicionar os ícones depois dos elementos.

Para localizar o código unicode que deve ser usado na propriedade content, pode-se verificar no arquivo font-awesome.css ou na página de cada ícone.

Lista completa de ícones Font Awesome.

Fonte: Using Font Awesome Icons without <i> Tags

Receba os posts do blog em seu email!


2017-01-21T22:11:16+00:00 dezembro 2014|Desenvolvimento Web|

10 Comentários

  1. pandadesigner 15 de fevereiro de 2015 em 05:38- Responder

    Oi, eu adorei esse recurso, coloquei no footer porém não ficou centralizado e sem espaço entre cada ícone. Já editei no CSS mas não sei acontece. :/

  2. Rô Rezende 22 de abril de 2015 em 20:53- Responder

    Grata! Funcionou muito bem!

  3. Bráulio Figueiredo Pinto 11 de junho de 2015 em 16:05- Responder

    Olá, Tatiane!

    Parabéns pelo blog e pelo artigo. Tenho estudado o código do projeto FontAwesome e estou desenvolvendo um arquivo de fontes também. Seguindo a mesma ideia do Font Awesome o BF Font Icons é colaborativo e livre para quem quiser baixar e utilizar. http://bf-font-icons.braulioti.com.br

  4. Davi 25 de janeiro de 2016 em 15:27- Responder

    Olá, gostaria de saber como faço para colocar os icones em tamanho 2x 3x etc… no modo normal basta citar fa-2x e no css? Obrigado.

    • Tatiane Pires 10 de fevereiro de 2016 em 00:57- Responder

      Já fiz alterações nos ícones do Font Awesome definindo o tamanho em pixels, em ou rem diretamente no CSS do elemento no qual havia adicionado um ícone.

  5. Enrique René 20 de fevereiro de 2016 em 01:30- Responder

    Parabéns pelo artigo, legal!
    Tenho uma dúvida. Eu fiz e funcionou. Então baixei esse arquivo pelo wget (uso linux) e deixei o arquivo localmente num diretório css. Com esse arquivo local não funcionou.. por que isso?
    Obrigado

  6. Lais 4 de outubro de 2016 em 17:18- Responder

    Olá Tatiane. Tentei adicionar as fontes fazendo download dos arquivos no site oficial pra poder manipular o css mas dai não reconheceu. Adicionei no meu header o min.css e o .css. Qual outro arquivo preciso adicionar qdo tenho a biblioteca no servidor?
    Não uso WordPress ou qualquer outra plataforma pro site, é um sistema próprio. Obrigada

    • Tatiane Pires 5 de outubro de 2016 em 23:36- Responder

      Lais, possivelmente, a utilização dos dois arquivos, font-awesome.css e font-awesome.min.css deve ser a causa do problema. Inclua no <header> somente o .min.css.

  7. silvano 11 de novembro de 2016 em 10:51- Responder

    Dica super útil. Me ajudou muito. Obrigado!!

Deixar Um Comentário