Fonte Awesome 6: Revisão completa
- 1 Como instalar a fonte incrível
- Método 1.
- Método 2.
- 2 Como usar ícones incríveis da fonte
- 1 ícones padrão
- 2 ícones grandes
- 3 ícones de largura fixa
- 4 ícones para lista de marcadores
- 5 ícones e citações emolduradas
- 6 ícones animados
- 7 ícones transformados
- 8 ícones de combinação
- 3 Font Awesome 4.5.0 collection, classes ecss code to insert using the content property
- 4 recursos relacionados
- Tamanho do ícone
- Cor do ícone
- Perguntas Frequentes
Fonte Awesome é uma coleção de ícones de vetor escaláveis. Os ícones podem ser formatados usando propriedades CSS, definir sua cor, tamanho, sombra e muito mais. Fonte A versão 5.5.0 inclui 605 ícones.
1 Como instalar a fonte incrível
Método 1.
Use a versão font-awome.css do arquivo adicionando o seguinte código ao<head> seção:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Depois que a fonte estiver conectada, você pode usar os ícones no seu site.
Método 2.
Faça o download da fonte de Font Awesome . Desembale o arquivo e faça o upload de duas pastas do arquivo para o servidor do site - CSS e fontes. Se você já possui pastas com esses nomes em seu site, basta adicionar arquivos das pastas baixadas a elas.
Você pode usar a versão completa ou minificada do arquivo:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Como usar ícones incríveis da fonte
Os ícones podem ser adicionados a uma página da web de duas maneiras: definindo as classes apropriadas para o<i> e<span> elements, ouby adding them to the desired element using the :before, :after pseudo-elements ethe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Antes {content: "\ f015";/ * Adicione ícone doméstico */Font-Family: Fontawesome; cor: #AAAAAA; Margin-Right: 10px;}1 ícones padrão
A fonte impressionante foi projetada para ser usada com elementos embutidos. Para adicionar ícones, você primeiro precisa definir a classe FA como<i> ou<span> elemento.
Para adicionar o ícone selecionado antes ou depois do elemento, um vazio<i></i> ou<span></span> O elemento é adicionado ao elemento, que recebe uma classe de ícone, bem como uma classe adicional que estende o estilo.
<i class="fa fa-camera-retro"></i>2 ícones grandes
Para aumentar o tamanho de um ícone em relação ao seu contêiner, use as classes FA-LG (33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 ícones de largura fixa
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation oulists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Casa</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Biblioteca</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Formulários</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Definições</a ></li></ul>4 ícones para lista de marcadores
Use as classes FA-ul e FA-Li para substituir as balas padrão em um<ul>...</ul> lista com marcadores.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Item da lista</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Item da lista</li> <li><i class="fa-li fa fa-square"></i>Item da lista</li></ul>5 ícones e citações emolduradas
Use the fa-border class to set the border for the icon. The pull-right epull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor Sit AMET, consectur adipiscing elit. Donec Nec Purus Congu, Posuere Libero, Porta Sapien. Em sed elit lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 ícones animados
Adicione as classes FA-spin, FA-Pulse, FA-refresh, FA-Cog para configurar ícones de spinning. A animação não é suportada no IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 ícones transformados
Para girar ou flip-ícones, use as classes FA-Rotate-* e FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 ícones de combinação
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, efa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes ecss code to insert using the content property
Ícones para aplicativos da web FA -adjust - \ f042;FA -ACHOR - \ f13D;
FA -Archive - \ f187;
Fa -arrows - \ f047;
FA -Aterisk - \ f069;
Faat - \ f1fa;
Em escala de balance-\ f24e;
FA -BAN - \ f05E;
FA -bank - \ f19c;
FA -Barcode - \ f02a;
FA-Battery-Enchty-\ f244;
FA-Battery-Me-Mex-\ f242;
FA-Battery-Quarter-\ f243;
FA-Battery-Three-Quarters-\ f241;
FA-Battery-Full-\ f240;
FA -BED - \ f236;
Fa -beer - \ f0fc;
FA -Bell - \ f0f3;
FA-Bell-Slash-\ f1f6;
FA -binoculares - \ f1e5;
FA-Birthday-CAKE-\ f1fd;
FA -BOLT - \ f0E7;
FA -Bomb - \ f1e2;
FA -book - \ f02d;
Para girar ou flip-ícones, use as classes FA-Rotate-* e FA-FLIP-*.
4 recursos relacionados
Além da coleção incrível da fonte, você também pode usar outras fontes de ícones.
Fontello.Fontello tem uma grande coleção de várias fontes de ícone. Você pode selecionar os ícones que você gosta e baixá -los no seu computador.
Ícone da fundação.Ícone Foundation é outra coleção de fontes de ícone dos desenvolvedores da estrutura da fundação. Além dos ícones padrão, o site apresenta ícones redondos, ícones de mídia social e muito mais.
ícones materiais.Os ícones materiais são os ícones planos unificados do Google que incorporam facilidade de percepção. Os ícones são otimizados para uma tela bonita em todas as plataformas comuns e para todas as resoluções de tela.
A coleção de fontes do ícone contém mais de 750 ícones. A maneira mais fácil de instalar uma coleção em seu site é usar ícones como o Google Web Fontes. Para fazer isso, o código a seguir está incluído na marcação de página:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Para exibir corretamente a fonte nos navegadores, o elemento que usará a fonte do ícone recebe a classe Material-ícones:
.Material-ícones {Font-Family: 'Material Icons'; Peso da fonte: estilo de fonte normal: tamanho normal do tamanho da fonte: 24px; / * Tamanho do ícone preferido */ Display: Block inline; largura: 1em; Altura: 1em; altura da linha: 1; transformação de texto: nenhum; Espacamento de cartas: Normal Word-Orble: Normal; Espaço branco: Nowrap; direção: ltr; -Webkit-font-smanding: antialiaseado; / * Suportado por todos os navegadores do Webkit */ Renderização de texto: Otimizelegibility; / * Suporte de Safari e Chrome */ -moz-osx-Font-Smoothing: GrayScale; /* Suporte do Firefox. */ fontes-rumores: 'Liga'; /* IE Suporte. */}Os próprios ícones são adicionados usando o<I class=''material-ícones''>Ligatura ou código HTML do ícone</i> tag, por exemplo:
<i class="material-ícones">conta_balance_wallet</i><i class="material-ícones"></i>A ligadura é entendida por todos os navegadores modernos, ou seja - a partir da versão 10. O código do ícone é gerado automaticamente, para isso que você precisa clicar com a esquerda na imagem do ícone e copiar a aparência sugerida.
Tamanho do ícone
Tamanho do ícone is controlled by additional classes:
.Material-ícones.md-18 {font-size: 18px;} /* para<i class="material-ícones md-18"></i> */.Material-ícones.md-24 {font-size: 24px;} /* para<i class="material-ícones md-24"></i> */.Material-ícones.md-36 {font-size: 36px;} /* para<i class="material-ícones md-36"></i> */.Material-ícones.md-48 {font-size: 48px;} /* para<i class="material-ícones md-48"></i> */Cor do ícone
A cor dos ícones também é definida usando classes adicionais:
.Material-ícones.md-Dark {color: rgba (0, 0, 0, 0,54);} /*<i class="material-ícones md-dark"></i> */.Material-ícones.md-Light {color: rgba (255, 255, 255, 1);} /*<i class="material-ícones md-light"></i> */.Material-ícones.md-Dark.md-inativo {color: rgba (0, 0, 0, 0,26);} /*<i class="material-ícones md-dark md-inactive"></i> * /.Material-ícones.md-LIGHT.MD-Inativo {Color: RGBA (255, 255, 255, 0,3);} /*<i class="material-ícones md-light md-inactive">enfrentar</i> */Para definir uma cor personalizada, você precisa adicionar uma classe que define a cor do ícone, por exemplo:
.material-ícones.indigo {color: #1a237e;} /*<i class="material-ícones indigo"></i> */Perguntas Frequentes
- O que a fonte é incrível em termos simples?
- Em essência, é uma fonte com ícones que podem ser adicionados a qualquer elemento da página da web para aprimorar sua visibilidade e design. A coleção consiste em várias centenas de ícones adequados para qualquer tarefa e finalidade.Mais informações sobre este link
Michel Pinson é um entusiasta de viagens e criador de conteúdo. Fusão de paixão pela educação e exploração, ele foi dividido em compartilhar conhecimento e inspirar outras pessoas através do conteúdo educacional cativante. A aproximando o mundo, capacitando indivíduos com experiência global e um sentimento de viajante.
