O Font Awesome é um kit de ferramentas para sites que oferece ícones e logotipos sociais. O React é uma biblioteca de programação que é utilizada para criar interfaces de usuários. Embora o time do Font Awesome tenha criado um componente do React para promover a integração, ainda existem alguns fundamentos a serem compreendidos sobre o Font Awesome 5 e como ele é estruturado. Neste tutorial, você irá explorar como usar o componente Font Awesome do React.
Nenhuma programação é exigida para este tutorial, mas caso tenha interesse em experimentar com alguns do exemplos, você precisará do seguinte:
O time do Font Awesome criou um componente do React para que você possa utilizar os dois em conjunto. Com essa biblioteca, siga o tutorial após ter selecionado seu ícone.
Neste exemplo, iremos usar o ícone home
a fazer tudo no arquivo App.js
:
import React from "react";
import { render } from "react-dom";
// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// create our App
const App = () => (
<div>
<FontAwesomeIcon icon={faHome} />
</div>
);
// render to #root
render(<App />, document.getElementById("root"));
Seu aplicativo agora possui um pequeno ícone home. Você irá notar que esse código apenas seleciona o ícone home
para que apenas um ícone seja adicionado ao nosso tamanho do pacote.
Agora, o Font Awesome irá garantir que esse componente será substituído pela versão SVG do ícone assim que o componente for montado.
Antes de instalar e usar os ícones, é importante saber como as bibliotecas do Font Awesome são estruturadas. Como existem muitos ícones, o time decidiu dividi-los em vários pacotes.
Quando for escolher quais ícones você deseja, é recomendável visitar a página de íconas do Font Awesome para explorar as suas opções. Você verá filtros diferentes para escolher no lado esquerdo da página. Esses filtros são muito importantes, pois indicam de qual pacote você deve importar seu ícone.
No exemplo acima, obtivemos o ícone home
do pacote @fortawesome/free-solid-svg-icons
.
É possível decobrir o pacote ao qual o ícone pertence revisando os filtros à esquerda. Você também pode clicar em um ícone e ver o pacote ao qual ele pertence.
Assim que você descobre o pacote ao qual uma fonte pertence, é importante lembrar-se do atalho de três letras para aquele pacote:
fas
far
fal
fad
É possível pesquisar por um tipo específico na página de ícones:
Se você navegar na página de ícones do Font Awesome, irá notar que geralmente existem várias versões do mesmo ícone. Por exemplo, vamos dar uma olhada no ícone boxing-glove
:
Para usar um ícone específico, será necessário ajustar o <FontAwesomeIcon>
. Em seguida estão vários tipos do mesmo ícone de diferentes pacotes. Isso inclui os atalhos de três letras discutidos anteriormente.
Nota: os exemplos a seguir não funcionarão até que uma biblioteca de ícones seja construída daqui a algumas seções.
Aqui está um exemplo da versão sólida:
<FontAwesomeIcon icon={['fas', 'code']} />
Isso recorre à versão sólida padrão caso um tipo não seja especificado:
<FontAwesomeIcon icon={faCode} />
E a versão light usando fal
:
<FontAwesomeIcon icon={['fal', 'code']} />;
Foi necessário substituir nosso a propriedade do nosso ícone
para que fosse uma matriz ao invés de uma string simples.
Como existem várias versões de um mesmo ícone, pacotes diversos e pacotes gratuitos/profissionais, a instalação de todos eles envolve mais de um pacote npm
. Você pode precisar instalar vários deles para então escolher os ícones que você deseja.
Para este artigo, vamos instalar tudo para que possamos demonstrar como instalar múltiplos pacotes.
Execute o seguinte comando para instalar os pacotes necessários:
- npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome
Execute os comandos a seguir para instalar os ícones regulares:
- # regular icons
- npm i -S @fortawesome/free-regular-svg-icons
- npm i -S @fortawesome/pro-regular-svg-icons
Estes irão instalar os ícones sólidos:
- # solid icons
- npm i -S @fortawesome/free-solid-svg-icons
- npm i -S @fortawesome/pro-solid-svg-icons
Use esse comando para os ícones light:
- # light icons
- npm i -S @fortawesome/pro-light-svg-icons
Isso irá instalar ícones duotone:
- # duotone icons
- npm i -S @fortawesome/pro-duotone-svg-icons
Por fim, isto irá instalar os ícones de marca:
- # brand icons
- npm i -S @fortawesome/free-brands-svg-icons
Ou, caso prefira tê-los todos instalados de uma só vez, use este comando para instalar os conjuntos de ícones gratuitos:
- npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
Se você tiver uma conta profissional com o Font Awesome, use o seguinte comando para instalar todos os ícones:
- npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons
Você terminou de instalar os pacotes, mas ainda não os usou em seu aplicativo nem os adicionou aos nossos pacotes de aplicativo. Vamos olhar como você pode fazer isso no próximo passo.
Pode ser um processo tedioso precisar importar o ícone que você deseja em vários arquivos. Supondo que você use o logotipo do Twitter em vários lugares, você não vai querer precisar escrever isso diversas vezes.
Para importar tudo em um só lugar, ao invés de importar cada ícone em cada arquivo separado, vamos criar uma biblioteca Font Awesome.
Vamos criar o fontawesome.js
na pasta src
e então importá-lo em index.js
. Sinta-se livre para adicionar este arquivo em qualquer lugar, contanto que os componentes que você quiser usar tenham acesso aos ícones (sejam componentes filhos). Você poderia até mesmo fazer isso diretamente em seu index.js
ou App.js
. No entanto, pode ser melhor mover isso para um arquivo separado, uma vez que ele pode ser grande:
// import the library
import { library } from '@fortawesome/fontawesome-svg-core';
// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
library.add(
faMoneyBill,
faCode,
faHighlighter
// more icons go here
);
Se você fez isso em seu próprio arquivo, então será necessário importá-lo para o index.js
:
import React from 'react';
import { render } from 'react-dom';
// import your fontawesome library
import './fontawesome';
render(<App />, document.getElementById('root'));
Não é recomendável importar um pacote inteiro, pois assim todos os ícones são importados em seu aplicativo. Isso pode fazer com que o tamanho do pacote seja muito grande. Se for necessário importar o pacote inteiro, isso certamente é possível.
Neste exemplo, vamos supor que você queria todos os ícones de marca em @fortawesome/free-brands-svg-icons
. Neste caso, você iria usar o seguinte para importar todo o pacote:
import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
O fab
representa todo o pacote de ícones de marca.
A maneira recomendada de usar os ícones do Font Awesome é importando-os um a um, para que os tamanhos finais de seus pacotes sejam os menores possíveis, considerando que você irá importar apenas o necessário.
É possível criar uma biblioteca a partir de vários ícones de diferentes pacotes desta forma:
import { library } from '@fortawesome/fontawesome-svg-core';
import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
faGithubAlt,
faGoogle,
faFacebook,
faTwitter
} from '@fortawesome/free-brands-svg-icons';
library.add(
faUserGraduate,
faImages,
faGithubAlt,
faGoogle,
faFacebook,
faTwitter
);
Caso queira todos os tipos de boxing-glove
para os pacotes fal
, far
e fas
, importe todos eles como um nome diferente e então adicione-os.
import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';
library.add(
faBoxingGlove,
faBoxingGloveRegular,
faBoxingGloveSolid
);
Depois disso, você pode utilizá-los implementando os diferentes prefixos:
<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />
Agora que instalou o que precisa e adicionou seus ícones à sua biblioteca do Font Awesome, você está pronto para usá-los e atribuir tamanhos. Neste tutorial, vamos usar o pacote light (fal
).
Este primeiro exemplo irá usar o tamanho normal:
<FontAwesomeIcon icon={['fal', 'code']} />
O segundo exemplo usa o dimensionamento nomeado, que usa abreviações para pequeno (sm
), médio (md
), grande (lg
) e extragrande (xl
):
<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />
A terceira opção é usar o dimensionamento numerado que pode ir até 6
:
<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />
Ao usar o dimensionamento numerado, também é possível usar decimais para encontrar o tamanho perfeito:
<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
O Font Awesome estiliza os SVGs que ele usa tomando a cor de texto do CSS. Se você colocasse uma tag <p>
onde esse ícone fosse, a cor do parágrafo seria a cor do ícone:
<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
O Font Awesome também possui um recurso de transformações de potência, onde você pode juntar diferentes transformações:
<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
É possível usar qualquer uma das transformações encontradas no site do Font Awesome. Use isso para mover os íconas para cima, para baixo, para a esquerda ou para a direita de forma a obter o posicionamento perfeito ao lado do texto ou dentro de botões.
Ao usar ícones em um local onde todos eles precisam ser uniformes e da mesma largura, o Font Awesome permite usar a propriedade fixedWidth
. Por exemplo, vamos supor que você precise de larguras fixas para o menu suspenso da sua navegação:
<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
A implementação do movimento giratório é útil em botões de formulários quando um formulário estiver sendo processando. Use o ícone giratório para criar um efeito de carregamento distinto:
<FontAwesomeIcon icon={['fal', 'spinner']} spin />
Você pode usar a propriedade spin
em qualquer coisa!
<FontAwesomeIcon icon={['fal', 'code']} spin />
O Font Awesome permite a combinação de dois ícones para criar efeitos com o mascaramento. Você define seu ícone normal e então usa a propriedade mask
para definir um segundo ícone para ficar por cima. O primeiro ícone ficará limitado dentro do ícone de mascaramento.
Neste exemplo, criamos filtros de marcador usando o mascaramento:
<FontAwesomeIcon
icon={['fab', 'javascript']}
mask={['fas', 'circle']}
transform="grow-7 left-1.5 up-2.2"
fixedWidth
/>
Observe como é possível reunir várias propriedades de transform
para mover o ícone interno para se encaixar dentro do ícone de mascaramento.
Até mesmo colorimos e alteramos o logotipo de fundo com o Font Awesome:
react-fontawesome
e ícones fora do ReactSe o seu site como um todo não for um aplicativo de página única (SPA), você possui um site tradicional e adicionou o React por cima. Para evitar a importação da biblioteca principal do SVG/JS e também a biblioteca react-fontawesome
, o Font Awesome criou uma maneira de usar as bibliotecas do React para monitorar ícones fora dos componentes do React.
Se você possui algum <i class="fas fa-stroopwafel"></i>
, podemos dizer ao Font Awesome para monitorar e atualizar eles usando o seguinte:
import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
Os MutationObservers são uma tecnologia Web que permite-nos monitorar o DOM por alterações com um bom desempenho. Aprenda mais sobre essa técnica nos documentos do React do Font Awesome.
Usar o Font Awesome e o React em conjunto gera ótimos resultados, mas cria a necessidade de usar vários pacotes e considerar diferentes combinações. Neste tutorial, você explorou algumas das maneiras de usar o Font Awesome e o React juntos.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.