Tamanho do ícone Font Awesome: classes, CSS e inline

Existem três formas de controlar o tamanho de um ícone Font Awesome. A escolha depende de quanto controle você precisa e como o ícone está inserido no projeto.

Resumo rápido:

<!-- Usando classe da biblioteca -->
<i class="fa-solid fa-star fa-2x"></i>

<!-- Usando CSS -->
<i class="fa-solid fa-star meu-icone"></i>
<!-- .meu-icone { font-size: 2rem; } -->

<!-- Usando estilo inline -->
<i class="fa-solid fa-star" style="font-size: 2rem;"></i>

Método 1: classes de tamanho do Font Awesome

A forma mais prática para tamanhos padronizados. Adicione uma classe de tamanho ao elemento junto com a classe do ícone.

<i class="fa-solid fa-star fa-xs"></i>
<i class="fa-solid fa-star fa-lg"></i>
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-5x"></i>

Tabela completa de classes de tamanho (Font Awesome 6)

Todos os valores são relativos ao font-size do elemento pai, por isso o ícone se ajusta proporcionalmente quando você muda o tamanho da fonte do contexto.

Fonte: documentação oficial do Font Awesome.

Diferença importante: Font Awesome 5 vs Font Awesome 6

Se você usa Font Awesome 5 (versão anterior), as classes fa-2xs, fa-xl e fa-2xl não existem. Essas três classes foram adicionadas na versão 6.

Font Awesome 5 tinha: fa-xs, fa-sm, fa-lg, fa-2x até fa-10x

Font Awesome 6 adicionou: fa-2xs, fa-xl, fa-2xl e formalizou o fa-1x

Se você está usando FA5 e uma classe de tamanho não funciona, verifique se ela está disponível nessa versão antes de adicionar CSS customizado.

Método 2: CSS com font-size

Use quando precisar de um valor específico fora das classes padrão ou quando precisar aplicar responsividade avançada.

.icone-grande {
  font-size: 48px;
}

.icone-responsivo {
  font-size: clamp(20px, 5vw, 64px);
}

<i class="fa-solid fa-star icone-grande"></i>
<i class="fa-solid fa-star icone-responsivo"></i>

Usar clamp() deixa o ícone responsivo automaticamente: clamp(mínimo, ideal, máximo). O ícone cresce e diminui com a tela sem nunca sair de uma faixa de tamanho aceitável.

Para valores que precisam escalar com o texto da página, prefira rem em vez de px:

.icone-menu {
  font-size: 1.5rem; /* 24px se o root for 16px */
}

Método 3: estilo inline

Funciona para casos pontuais onde uma classe específica não justifica.

<i class="fa-solid fa-star" style="font-size: 32px;"></i>

Quando usar: prototipagem rápida, CMS sem acesso ao CSS, ou um ícone único com tamanho muito específico.

Quando não usar: se você tem mais de dois ícones com o mesmo tamanho, crie uma classe CSS. Estilo inline não é reutilizável e dificulta manutenção.

Como combinar tamanho com cor e espaçamento

O Font Awesome herda a cor do texto do elemento pai. Para personalizar:

.icone-destaque {
  font-size: 3rem;
  color: #e63946;
  margin-right: 8px;
  vertical-align: middle;
}

A propriedade vertical-align: middle alinha o ícone ao centro vertical do texto ao lado, o que evita desalinhamentos comuns quando misturamos ícones com palavras.

Acessibilidade: ícones que os leitores de tela precisam ignorar

Ícones puramente decorativos devem ser escondidos dos leitores de tela com aria-hidden="true":

<i class="fa-solid fa-star fa-2x" aria-hidden="true"></i>

Quando o ícone tem função informativa sem texto ao lado, use title e role:

<i class="fa-solid fa-star fa-2x" 
   role="img" 
   aria-label="Favorito"></i>

Ícones com sentido semântico precisam de contexto para quem usa tecnologia assistiva.

Se quiser aprofundar o uso do Font Awesome dentro de um projeto web e entender como os ícones se encaixam na estrutura HTML, veja como colocar texto em cima de uma imagem em HTML e como remover os estilos padrão de um botão em CSS para mais exemplos de controle de elementos visuais com CSS.

Perguntas frequentes

Como aumentar o tamanho de um ícone Font Awesome para 50px?

Use CSS diretamente: font-size: 50px aplicado ao elemento via classe ou estilo inline. Não existe uma classe de tamanho exato de 50px, então o CSS é o caminho quando você precisa de valores específicos fora das classes padrão.

Por que a classe fa-xl não funciona no meu projeto?

A classe fa-xl foi introduzida no Font Awesome 6. Se o projeto usa a versão 5, essa classe não existe. Verifique a versão em uso e, se precisar de um tamanho equivalente no FA5, use CSS com font-size: 1.5em.

As classes de tamanho funcionam com Font Awesome Free?

Sim. Todas as classes de tamanho (fa-xs, fa-lg, fa-2x etc.) funcionam tanto na versão gratuita quanto na Pro do Font Awesome.

Qual a diferença entre fa-lg e fa-2x?

fa-lg aumenta o ícone para 1,25em (25% maior que o texto ao redor), enquanto fa-2x aumenta para 2em (o dobro do tamanho do texto). Para uso junto com texto, fa-lg mantém uma proporção mais harmônica.

Como fazer o ícone Font Awesome responsivo?

Use unidades relativas no CSS: font-size: 2rem escala com o tamanho base da página. Para responsividade mais granular, use clamp(): font-size: clamp(16px, 4vw, 48px) define mínimo, valor relativo ao viewport e máximo.