Neste artigo, estaremos trabalhando em como usar Font Awesome em um aplicativo Angular e como podemos usar a animação e estilo de ícone de Font Awesome.
Antes de prosseguirmos, vamos falar sobre o que é Font Awesome.
Fonte incrível
Font Awesome é um kit de ferramentas de ícones com mais de 1.500 ícones gratuitos que são incrivelmente fáceis de usar. Os ícones foram criados usando um vetor escalonável e herdam os tamanhos e cores CSS quando aplicados a eles. Isso os torna ícones de alta qualidade que funcionam bem em qualquer tamanho de tela.
Antes do lançamento do Angular 5, os desenvolvedores tinham que instalar o pacote Font Awesome e fazer referência a seu CSS em um projeto Angular antes que pudesse ser usado.
Mas o lançamento do Angular 5 facilitou a implementação do Font Awesome em nosso projeto com a criação do componente Angular para Font Awesome. Com este recurso, Font Awesome pode ser integrado em nossos projetos de forma limpa.
Os ícones de fontes impressionantes combinam bem com o texto embutido devido à sua escalabilidade. Neste artigo, vamos explorar mais sobre como usar animação, colorir e dimensionar ícones de fontes incríveis.
Criação de um aplicativo Angular de demonstração
Vamos criar um aplicativo Angular de demonstração para este tutorial. Abra seu terminal, CD para o diretório do projeto e execute o comando abaixo.
Antes de executar o comando, certifique-se de ter o Node.js instalado em seu sistema e também Angular CLI instalado também:
ng new angular-fontawesome
Instalando dependências do Font Awesome
Para quem já tem um projeto, podemos acompanhar aqui. Assim que o comando acima for executado, coloque o CD no diretório do projeto e instale o comando do ícone Font Awesome abaixo:
npm install @ fortawesome/angular-fontawesome npm install @ fortawesome/fontawesome-svg-core npm install @ fortawesome/free-marks-svg-icons npm install @ fortawesome/free-regular-svg-icons npm install @ fortawesome/free-solid-svg-icons # ou yarn add @ fortawesome/angular-fontawesome yarn add @ fortawesome/fontawesome-svg-core yarn add @ fortawesome/free-marks-svg-icons yarn add @ fortawesome/free-regular-svg-icons yarn add @ fortawesome/free-solid-svg-icons
Usando ícones de fontes incríveis em aplicativos angulares
Existem duas etapas para usar o Font Awesome em um projeto Angular. Vamos olhar para ambos:
- Como usar ícones Font Awesome no nível de componentes
- Como usar a biblioteca de ícones Font Awesome
Como usar ícones Font Awesome no nível de componentes
Esta etapa tem a ver com o uso de ícones Font Awesome no nível do componente e não é uma boa abordagem porque envolve a importação de ícones para cada um de nossos componentes que precisam de um ícone e também a importação dos mesmos ícones várias vezes.
Ainda vamos dar uma olhada em como podemos usar ícones em um componente, caso estejamos construindo um aplicativo que exige o uso de um ícone em apenas um componente.
Depois de instalar o Font Awesome, abra o app.module.ts e importe o FontAwesomeModule exatamente como este abaixo:
import {FontAwesomeModule} de'@ fortawesome/angular-fontawesome'
importações: [ BrowserModule, AppRoutingModule, FontAwesomeModule ],
Depois disso, abra app.component.ts e importe o nome do ícone que deseja usar. Digamos que queremos fazer uso do faCoffee :
import {faCoffee} de'@ fortawesome/free-solid-svg-icons';
A seguir, criamos um nome de variável chamado faCoffee e atribuímos o ícone que importamos à variável para que possamos usá-lo no app.component.html . Se não fizermos isso, não podemos usá-lo:
faCoffee=faCoffee;
Agora, no app.component.html , escreva o código abaixo:
Execute o comando para servir nosso aplicativo e verificar se nosso ícone está aparecendo:
ng servir
Se olharmos nossa página da web, veremos faCoffee exibido na tela. Isso mostra que o ícone foi instalado e importado com sucesso.
Como usar a biblioteca de ícones Font Awesome
Esta é a melhor abordagem para usar o Font Awesome em nossos aplicativos, especialmente quando queremos usá-lo em todos os componentes sem reimportar ícones ou importar um ícone várias vezes. Vamos dar uma olhada em como podemos conseguir isso.
Abra app.module.ts e escreva o código abaixo:
import {FaIconLibrary} de'@ fortawesome/angular-fontawesome';
importar {faStar as farStar} de'@ fortawesome/free-regular-svg-icons';
importar {faStar as fasStar} de'@ fortawesome/free-solid-svg-icons'; export class AppModule { construtor (biblioteca: FaIconLibrary) { library.addIcons (fasStar, farStar); }
}
Depois disso, podemos usá-lo diretamente dentro de app.component.html sem declarar uma variável e passá-la para essa variável antes de usá-la:
Se carregarmos a página da web agora, veremos o ícone de estrela sendo exibido.
Estilo de ícone em fontes incríveis
Font Awesome tem quatro estilos diferentes, e veremos os ícones gratuitos-menos os ícones de luz Pro, que usam o prefixo 'fal' e uma licença profissional:
- Os ícones sólidos usam o prefixo
'fas'e são importados de@fortawesome/free-regular-svg-icons - Os ícones regulares usam o prefixo
'far'e são importados de@fortawesome/free-solid-svg-icons - Os ícones da marca usam o prefixo
'fab'e são importados de@fortawesome/free-brands-svg-icons
Seguindo em frente, vamos ver o que mais podemos fazer com os ícones Font Awesome.
Alterar a cor e o tamanho do ícone sem escrever um estilo CSS
Vejamos como podemos alterar as cores dos ícones do Font Awesome sem escrever um estilo CSS no Angular.
Essa abordagem nos ajuda a usar um ícone em um nível de componente. No entanto, ao usar essa abordagem em todos os componentes, não é útil porque mudará as cores dos ícones em todos os componentes do nosso projeto. Para vários componentes, podemos alterá-lo apenas uma vez usando uma classe CSS ou atributo de estilo.
Mas ao trabalhar em um nível de componente, podemos usá-lo, pois usaremos o ícone apenas naquele componente, em vez de criar um atributo CSS para ele e definir o estilo no arquivo CSS. Então, vamos ver como faremos isso em um projeto Angular. Por padrão, o ícone abaixo é preto e queremos alterá-lo para vermelho :
//do preto//para vermelho
Ao alterar as cores e traços dos ícones usando o estilo embutido, temos que usar o atributo fa-icon .
A seguir, vamos aumentar o tamanho do ícone de pequeno para grande usando o estilo embutido no Angular. Para fazer isso, temos que usar a propriedade size do fa-icon :
<ícone-fa [ícone]="['fab','angular']" [estilos]="{traço:'vermelho', cor:'vermelho'}" tamanho="xs" >
Por padrão, os ícones Font Awesome herdam o tamanho do container pai. Isso permite que eles correspondam a qualquer texto com o qual possamos usá-los, mas temos que dar a eles o tamanho que queremos, se não gostarmos do tamanho padrão.
Usamos as classes xs , sm , lg , 5x e 10x . Essas classes aumentam e diminuem o tamanho do ícone para o que queremos.
Animando ícones incríveis de fontes
Vejamos também como podemos animar ícones Font Awesome sem usar CSS ou bibliotecas de animação no Angular.
Como desenvolvedor, quando um usuário clica em um botão de envio ou quando a página está carregando, podemos mostrar um efeito carregador ou giratório informando ao usuário que algo está carregando.
Podemos usar ícones Font Awesome para atingir esse objetivo. Em vez de importar uma biblioteca de animação CSS externa, podemos apenas adicionar o atributo Font Awesome spin à tag do ícone.
Fazer isso evita que baixemos uma biblioteca de animação CSS completa apenas para usar um efeito giratório ou escrever uma longa animação CSS usando frames-chave.
Então, vamos ver como podemos conseguir isso usando um ícone React :
<ícone-fa [ícone]="['fab','reagir']" [estilos]="{traço:'azul', cor:'azul'}" tamanho="10x"
>
Acabamos de importar o ícone React e agora vamos animá-lo. No componente do ícone React, adicione o atributo do carregador Font Awesome spin :
<ícone-fa [ícone]="['fab','reagir']" [estilos]="{traço:'azul', cor:'rgb (0, 11, 114)'}" tamanho="10x" [spin]="verdadeiro"
>
Quando carregarmos a página da web, veremos o ícone React girando infinitamente. Isso ocorre porque definimos o atributo spin como true .
Conclusão
Neste artigo, pudemos ver como podemos usar ícones Font Awesome em um projeto Angular, como adicionar alguns estilos básicos que vêm com a biblioteca de ícones e como animar ícones.
Ainda podemos fazer mais com os ícones Font Awesome, coisas como Ícones de largura fixa , Rotativo Ícones , Power Transforms e combinando dois ícones. Os tutoriais do Font Awesome podem ensinar a você mais sobre como usar essas ferramentas em seus projetos.
Se você achou este artigo útil, compartilhe-o com seus amigos.
A postagem Como adicionar uma fonte incrível a um projeto Angular apareceu primeiro no LogRocket Blog .
