Como adicionar ícones incríveis de fontes em html & css?
Fontes Icons incríveis baseados em CSS e menos, são uma das opções entre a gama enorme de ícones que podem ser incorporados em seu site. Vamos explorar como adicioná -los em sua página da web.
Como adicionar ícones incríveis de fontes?
Existem duas maneiras de adicionar uma edição gratuita de ícones incríveis da fonte em sua página da Web HTML:
Carregue a biblioteca
A primeira abordagem de adicionar um ícone Awesome de fonte em seu site é adicionar a biblioteca incrível da fonte na seção do seu arquivo html. Por exemplo, na seguinte sintaxe, a fonte Awesome Library da versão 4.7.0 está sendo adicionado na seção.
Bibliotecas de outras versões impressionantes da fonte estão disponíveis online.
Obtenha código de kit
A segunda abordagem para adicionar um ícone Awesome de fonte em sua página da web é fazer uma conta no site oficial da Font Awesome para receber um código com o nome "Código do kit". Este código pode ser usado ao inserir uma fonte incrível em sua página da web. Depois de obter o código do kit, adicione o link no atributo SRC da tag…
Ao receber o código do kit, insira -o no lugar de "kitcode" no link e vá em frente. Por exemplo.
Exemplo
Suponha que você queira inserir um ícone da câmera usando a abordagem do código do kit. Para isso, considere o seguinte snippet de código:
Observação: Ícones incríveis de fontes são adicionados em ou elementos.
O prefixo da FA é usado para adicionar ícones incríveis de fontes junto com o nome do ícone. As versões mais recentes da Fonte Awesome também usam prefixos como o FAS (para modo sólido) e longe (para o modo regular).
Saída
O ícone da câmera incrível da fonte inseriu com sucesso.
A demonstração abaixo mostra a diferença entre o FAS e os prefixos distantes.
Saída
O ícone de sino incrível da fonte (modo sólido e modo regular) incorporado com sucesso.
Agora que sabemos como inserir um ícone incrível na página da web, vamos ver como redimensionar ícones incríveis da fonte.
Redimensionando ícones incríveis de fontes
Há um total de 13 classes que são usadas para alterar o tamanho dos ícones incríveis da fonte e essas classes são; FA-Xs, FA-SM, FA-LG, FA-2X, FA-3X, FA-4X, FA-5X, FA-6X, FA-7X, FA-8X, FA-9X e FA-10x.
Exemplo
Este exemplo demonstra algumas das classes mencionadas acima.
Saída
O ícone de sino incrível da fonte com vários tamanhos é inserido na página da web.
Mais sobre ícones incríveis da fonte!
Aqui listamos algumas coisas que podem ser feitas para fof.
Ícones incríveis de fonte animada
Você pode animar ícones incríveis da fonte usando as classes abaixo mencionadas.
fa spin: É usado para girar um ícone.
FA-Pulse: Também é usado para girar um ícone, mas com 8 etapas.
Exemplo
Este exemplo demonstra as classes mencionadas acima.
Saída
Os ícones Sync-Alt e Spinner são animados usando as classes FA-spin e FA-Pulse.
Ícones listados de fontes
Você pode substituir as balas comuns usando as classes fa-ul e fa-li.
Exemplo
As classes mencionadas acima são demonstradas aqui.
- Item 1
- Item 2
- Item 3
Saída
Os ícones listados impressionantes da fonte estão incorporados na página da web html.
Gire e flip fonte Icons Awesome
Você pode girar e deslizar ícones incríveis da fonte, utilizando as classes fa-rotate-* e fa-flip-*.
Exemplo
O exemplo abaixo mostra como girar ícones ANF Flip Font Awesome.
Saída
O ícone incrível da fonte do carro está sendo girado e virado de diferentes ângulos.
Empilhar ícones incríveis da fonte
Você pode empilhar ícones incríveis da fonte usando as seguintes classes.
FA-Stack: é usado para o ícone considerado como pai na pilha.
FA-STACK-1X: é usado para ícone com o tamanho regular na pilha.
FA-STACK-2X: é usado para ícone com o tamanho maior na pilha
FA-Inverse: é usado para alterar a cor de um ícone na pilha.
Exemplo
Este exemplo é uma demonstração de ícones incríveis de fonte empilhada.
Saída
O ícone de proibição incrível da fonte empilhado com sucesso no ícone de carro incrível.
Ícones incríveis da fonte cercada e puxada
Você pode adicionar bordas e puxar ícones incríveis da fonte usando aulas; Classes FA-Border, Fa-Pull-Right e Fa-Pull-Left.
Exemplo
Aqui a fronteira e os ícones puxados aulas são ilustradas.
Os ícones são uma maneira de demonstrar uma ação ou um objeto visualmente. Estes são considerados altamente importantes em um design da web para chamar a atenção do usuário. Além disso, os ícones aumentam a aparência de um site, fornecem fácil navegação e aumentam a experiência do usuário. Fontes Icons incríveis baseados em CSS e menos, são uma das opções entre a gama enorme de ícones que podem ser incorporados em seu site.
Saída
Uma citação foi puxada com sucesso para a esquerda com uma borda.
Conclusão
Ícones incríveis de fonte podem ser incorporados em seu site recebendo um código de kit do site oficial da Fonte Awesome. Existem várias classes disponíveis para redimensionar ícones incríveis da fonte, além disso, você pode fazer várias coisas com esses ícones, como ícones impressionantes da fonte animada, usá -los em vez de balas comuns em uma lista, girar e girar esses ícones, etc. Isso e muito mais sobre os ícones incríveis da fonte são discutidos neste artigo com a ajuda de exemplos adequados.