<![CDATA[ Fontes - freeCodeCamp.org ]]> https://www.freecodecamp.org/portuguese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Fontes - freeCodeCamp.org ]]> https://www.freecodecamp.org/portuguese/news/ Eleventy Fri, 15 May 2026 14:30:10 +0000 60 <![CDATA[ Como adicionar ícones do Font Awesome aos seus botões ]]> https://www.freecodecamp.org/portuguese/news/como-adicionar-icones-do-font-awesome-aos-seus-botoes/ 642cc93886dbbe0599dbabfb Wed, 05 Apr 2023 01:30:00 +0000 Artigo original: How to Add Font Awesome Icons to Your Buttons

O Font Awesome é uma biblioteca conveniente de ícones. Esses ícones podem ser gráficos vetoriais armazenados no formato .svg ou fontes da web.

Esses ícones são tratados como se fossem fontes. Você pode especificar o tamanho deles usando pixels e eles assumirão o tamanho da fonte dos seus elementos pai do HTML.

Uso primário

Para incluir o Font Awesome em sua aplicação ou página, basta adicionar o código abaixo ao elemento <head> na parte superior do seu HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">

O elemento i foi usado originalmente para deixar nossos elementos em itálico, mas agora é normalmente usado para ícones. Você pode adicionar as classes do Font Awesome ao elemento i para torná-lo um ícone. Por exemplo:

<i class="fas fa-info-circle"></i>

Observe que o elemento span também pode ser usado com esses ícones.

Você pode adicionar um ícone deste modo:

<i class="fas fa-thumbs-up"></i>

Isso produzirá um ícone simples de "joia":

Aqui, você vê como poderia inserir o ícone em um botão:

<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>
thumbs-up-btn

Observe que há duas partes no uso do ícone, o prefixo de estilo e o nome do ícone. No exemplo acima, o prefixo de estilo e o nome do ícone são fas e fa-thumbs-up, respectivamente.

O Font Awesome oferece os seguintes prefixos de estilo:

ESTILOPREFIXO DE ESTILOTIPO DE PLANO
SólidofasGratuito
RegularfarPro
LevefalPro
Dois tonsfadPro
MarcasfabGratuito

Os ícones de marca normalmente são enviados pela própria empresa, sendo úteis para criar coisas como botões para autenticação em redes sociais ou pagamento. Esses ícones incluem o Twitter, Facebook, Spotify, Apple e até mesmo o freeCodeCamp:

<i class="fab fa-free-code-camp"></i>
fcc-fa-icon

Embora você tenha acesso apenas aos ícones sólidos e de marca no plano gratuito, ainda há muitas maneiras de estilizá-los.

Estilizando ícones do Font Awesome

Para aplicações simples, você pode usar os estilos em linha:

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-thumbs-up"></i>
</span>
styled-thumbs-up

Para alterar o tamanho, você também pode usar as palavras-chave que vêm com o Font Awesome:

<i class="fas fa-thumbs-up fa-xs"></i>
<i class="fas fa-thumbs-up fa-sm"></i>
<i class="fas fa-thumbs-up fa-lg"></i>
<i class="fas fa-thumbs-up fa-2x"></i>
<i class="fas fa-thumbs-up fa-3x"></i>
<i class="fas fa-thumbs-up fa-5x"></i>
<i class="fas fa-thumbs-up fa-7x"></i>
<i class="fas fa-thumbs-up fa-10x"></i>
sizing-keywords

Algo que é importante de lembrar é que os ícones do Font Awesome herdam o font-size do contêiner pai. Isso significa que os ícones são dimensionados como o tamanho do texto com o qual eles serão usados, o que torna o design consistente.

Por exemplo, digamos que você quer criar vários botões. O tamanho padrão para os botões é bem pequeno. Desse modo, você escreve o CSS de maneira a aumentar o tamanho dos botões, juntamente com o texto e os ícones dentro deles:

<button>
  <i class="fas fa-thumbs-up"></i> Like
</button>

<button>
  <i class="fas fa-thumbs-down"></i> Dislike
</button>

<button>
  <i class="fas fa-share"></i> Share
</button>
button {
  font-size: 1.5em;
  margin: 5px;
}
buttons-ex

Você também pode ajustar o tamanho de um ícone diretamente, marcando o próprio ícone com o CSS e ajustando seu font-size.

O Font Awesome é incrível! Como a maioria dos kits de ferramentas populares para ícones, é fácil incluí-lo e usá-lo em todos os seus projetos. É a hora de você colocar ícones em todos os seus projetos.

Mais informações

]]>