Adicionando Font Awesome VueJS

O Font Awesome é uma das bibliotecas de ícones mais populares atualmente, e nesse post irei demonstrar o jeito mais simples de adicionar esse pacote de ícones ao um projeto VueJS.

Para ficar mais claro o que precisa ser adicionado ao projeto, irei adicionar o font awesome a um projeto novo criado através do vue-cli.

1 – Adicionado dependências com NPM

Como uso o vue-cli para criar um projeto VueJS e uso o npm para gerenciar dependências. Portanto, prefiro usar o npm para instalar o Font Awesome em vez de adicionar um link de CDN à parte principal.

Podemos adicionar a dependência facilmente com o seguinte comando:

npm install --save-dev @fortawesome/fontawesome-free

2 – Importando biblioteca

Importe a biblioteca do font awesome no arquivo main.js do seu projeto vuejs, como no passo seguinte:

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

3 – Utilização dos ícones

Agora basta você utilizar o ícones normalmente como descrito na documentação.

Veja aqui a galeria de ícones disponível: https://fontawesome.com/icons?d=gallery

Exemplo:

<i class="fab fa-earlybirds"></i>
<i class="fab fa-vuejs"></i>

Conclusão

Apenas reforçando que para consultar os ícones do font awesome você pode acessar: https://fontawesome.com/icons?d=gallery

Para consultar o código fonte dessa demonstração acesse: https://github.com/aluizrech/font-awesome-vuejs