CSS: Dominando o Font Awesome \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 17 Horas 32 Min 45 Seg Tempo restante da oferta: 17 32 45 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) CSS: Dominando o Font Awesome [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # CSS: Dominando o Font Awesome Aprenda como utilizar todo o potencial do Font Awesome para facilitar o uso de ícones em suas aplicações. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075048/Font-Awesome.png) Olá Web Developers! Muitas pessoas conhecem o [Font Awesome](https://fontawesome.com "Font Awesome"), biblioteca com vários ícones para uso em aplicações. Seu uso é bem simples, mas muitas pessoas apenas sabem utilizar os ícones. Vamos conhecer as outras funções que o `Font Awesome` disponibiliza que pode facilitar muito nosso trabalho. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Alterando o Tamanhos dos Ícones Já que o `Font Awesome` utiliza fontes, o mais comum é utilizar o `font-size` para alterar o tamanho dos ícones. Mas a bilioteca também nos disponibiliza classes CSS para facilitar o controle das dimensões, que utilizam o tamanho da fonte do elemento como base. Temos as classes `fa-xs`, `fa-sm`, `fa-lg` e também classes com números que vão de 2 a 10, como `fa-2x` e `fa-5x`. ```html ``` ## Mantendo a Largura em Ícones de tamanhos diferentes Há vários ícones de tamanhos diferentes, e isso pode passar uma impressão estranha em situações como a exibida logo abaixo: ```html ``` Muita gente resolveria esse problema definindo uma largura para os ícones com a propriedade `width` e centralizando-os. Mas isso não é preciso, pois o `Font Awesome` também tem uma classe para definir uma largura fixa (fixed width) para os ícones, a `fa-fw`. Veja a diferença agora: ```html ``` ## Criando Listas Um uso muito comum com os ícones do `Font Awesome` é a criação de listas. Também temos classes para facilitar isso: `fa-ul` e `fa-li`. O `fa-ul` deve ser colocado no elemento `` ou ``. Ele esconde o marcador padrão dos elementos das listas e arruma os espaços. Já o `fa-li` deve ser colocado em um container para os ícones. Ele irá posicionar os ícones no lugar certo. ```html Primeiro Item Segundo Item Terceiro Item ``` Veja que o `fa-li` já ajusta de tal maneira que nem precisamos utilizar a `fa-fw`. ## Girando Ícones Há momentos que encontramos um bom ícone, mas ele não está do jeito que queríamos. Talvez se ele estivesse virado para outro lado seria perfeito. Não precisamos manipular isso, pois outra vez o `Font Awesome` já inclui classes para isso. Primeiro tem os `rotate`, que rotacionam o ícone. No final do nome da classe podemos colocar `90`, `180` e `270`, indicando os graus que queremos rotacionar. ```html ``` [ ![C# (C Sharp) Intermediário](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/csharp.svg) Curso C# (C Sharp) Intermediário Conhecer o curso ](https://www.treinaweb.com.br/curso/csharp-intermediario) Além dessas classes, temos também os `flip`, que espelham os elementos na horizontal ou vertical. ```html ``` ## Bordas Em casos que precisamos dar uma separada entre ícone e outros elementos, podemos usar `fa-border` para destacar o ícone com uma borda. ```html O café é uma das bebidas mais consumidas no mundo. ``` Ainda não ficou tão bacana, e isso nos leva à próxima dica. ## Puxando Ícones Também podemos deixar os ícones no canto esquerdo (`fa-pull-left`) ou direito (`fa-pull-right`). Muito útil quando queremos colocar um ícone junto a um texto. Não é preciso que o `fa-border` esteja junto. Coloquei aqui apenas para exemplo. ```html O café é uma das bebidas mais consumidas no mundo. ``` ## Combinando Ícones Uma das minhas funcionalidades preferidas é a possibilidade de combinar ícones para poder criar um novo. A classe `fa-stack` deve ser colocada em um container com mais de um ícone, e ela será responsável por empilhá-los. O ícone que ficará por fora deve receber a classe `fa-stack-2x` para que ele fique maior, enquanto o ícone que ficará por dentro deve receber a classe `fa-stack-1x`. ```html ``` Se você quiser colocar um ícone preto em cima de um outro ícone preto, utilize a classe `fa-inverse` para inverter a cor do outro ícone para que ele possa aparecer. ```html ``` [ ![Desenvolvedor Front-end Júnior](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Front-end Júnior Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-junior) ## Animando Ícones Outra classe muito útil é a `fa-spin`. Ela deixa o ícone girando, o que é muito útil para quando queremos algo como a indicação de que estamos carregando algum recurso. ```html ``` O `fa-spin` faz o elemento girar de forma constante. Pode ser que você não queira isso, pode ser que girar aos poucos seja mais interessante. Isso fica mais fácil de entender com o exemplo a seguir, onde para ficar melhor o giro do elemento nós adicionamos a classe `fa-pulse`: ```html ``` Estes foram as principais funcionalidades do `Font Awesome`. Ainda há mais a explorar. Já conhecia essas classes? Utiliza em seus projetos? Conta pra gente aí nos comentários! - [ #Font Awesome ](https://www.treinaweb.com.br/blog/tag/font-awesome) - [ #Font Icons ](https://www.treinaweb.com.br/blog/tag/font-icons) - [ #Ícones ](https://www.treinaweb.com.br/blog/tag/icones) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox) Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-2-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media Query. Colocando em prática seu uso. ](https://www.treinaweb.com.br/blog/media-query-colocando-em-pratica-seu-uso) Neste artigo, nós iremos aprender sobre o uso de Media Query no CSS3, na prática aprendendo como utilizar na criação de cards responsivos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css-400x280.jpg) [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) 4 anos atrás ## [ Pixel físico e pixel CSS ](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css) Nesse artigo você irá entender ao certo, a diferença entre esses dois tipos de pixels, e o que isso impacta no desenvolvimento Front end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/REACT-ROUTER-400x280.jpg) [ React ](https://www.treinaweb.com.br/blog/categoria/react) 4 anos atrás ## [ Gerenciamento de Rotas no React com React Router ](https://www.treinaweb.com.br/blog/gerenciamento-de-rotas-no-react-com-react-router) Neste artigo vamos abordar um conceito importante dentro de aplicações com o React, O gerenciamento de Rotas no React com React Router. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/conhecendo-o-next-js-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo o Next.js ](https://www.treinaweb.com.br/blog/conhecendo-o-next-js) Veja neste artigo o que é o Next.js e suas principais características. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que há de novo no React 16? ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-no-react-16) O React, agora em sua versão 16, foi totalmente reescrito. Veja as melhorias e o que há de novo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **17h 32min 45s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58