Font Awesome: O Guia Completo da Biblioteca

Fonte de ícones gratuitos incríveis: O que é e o que é usado para. Como conectar ícones ao site. Vantagens e desvantagens da biblioteca.

Font Awesome Icon Set: O Guia Ultimate

Font Awesome é um conjunto de fontes e ícones baseados em CSS e menos. A ferramenta permite conectar rapidamente todos os tipos de ícones ao site, melhorando significativamente seu design e usabilidade. É o suficiente para inserir algumas linhas de código.

A fonte impressionante fornece ícones vetoriais escaláveis ​​que você pode personalizar facilmente - tamanho, cor, sombras e tudo o que pode ser feito com o CSS.

A Font Awesome Library tem uma enorme coleção das melhores sugestões para você. Você melhora seu projeto com ícones exclusivos. De fato, este é um grande conjunto de todos os tipos de ícones que você pode usar para seus próprios propósitos.

Em Trawesome, todos os ícones são absolutamente e completamente livres. A biblioteca é licenciada sob a Licença Pública Geral do GNU. Isso significa que pode ser usado livremente em projetos comerciais e, em princípio, em todos os lugares.

O conjunto foi criado por Dave Gandhi. Inclui ícones de mídia social gratuitos, ícones para melhorar a interface do usuário e muito mais.

Normalmente, os scripts de fonte incríveis são usados ​​em conjunto com bootstrap e bootstrapcdn. Font Awesome é a segunda apenas para o Google Fonts em popularidade.

Como funciona

A característica principal é que todos os ícones impressionantes da fonte não são imagens estáticas. Eles estão em formato de fonte. Em outras palavras, estas são fontes de ícones. Por exemplo, um ícone de pesquisa ou um logotipo de rede social é o mesmo que os caracteres simples A, B, C.

Font Awesome Icons é criado usando vetores escaláveis. Portanto, eles podem ser aumentados para quase qualquer tamanho.

Todos os ícones disponíveis estão incluídos em um arquivo de fonte. Tudo que você precisa é para baixar este arquivo do site oficial e conectá-lo em estilos.

Por que os designers escolhem a fonte incrível

Font Awesome tem uma série de vantagens:

• Conexão rápida. Você só precisa baixar um arquivo especial do site oficial e conectá-lo especificando o caminho para ele no código CSS.
• Flexibilidade e escalabilidade. Os ícones podem ser ampliados para qualquer tamanho. Os símbolos serão tão claros quanto o dispositivo permitir. Na idade de design responsivo, isso é importante. By the way, pelo mesmo motivo, os ícones impressionantes da fonte são adequados para exibições de retina.
• Estilização. Os ícones podem ser facilmente alterados em cores, tamanho, sombra ou quaisquer outros parâmetros ex ternos.   O designer recebe todos os benefícios do texto regular de estilo. Você também pode girar os ícones. Por exemplo, exibir de cabeça para baixo ou gire 90 graus.
• Carga rápida do site. Todos os ícones estão incluídos em um arquivo de fonte. Por isso, leva apenas uma solicitação HTTP para carregar a fonte impressionante. Isso é ótimo para o desempenho do site.
• Amor dos navegadores. Font Awesome é uma ferramenta Cross-Browser. Você não precisa se preocupar com a compatibilidade do navegador de fontes e ícones. Eles são bem apoiados por todos eles. Mesmo velho ie8.
• Compatível com diferentes estruturas. A biblioteca foi criada principalmente para bootstrap. No entanto, funcionará bem com outras estruturas também.
• Vários formatos. A ferramenta está disponível em formatos .teot, .ttf, .woff e svg. Então, a fonte é impressionante é tratada da mesma maneira que outras fontes da Web.
• Nenhum javascript é necessário. Font Awesome não requer javascript para ser executado.

Assim, a fonte é incrível é uma ferramenta eficaz e conveniente que economiza significativamente o tempo de layout e acelera o seu site.

Desvantagens da fonte incrível

A ferramenta também tem desvantagens. Felizmente, não há muitos deles.

Primeiro, os ícones só podem ser pintados em uma cor. No entanto, essa limitação pode ser contornada. Por exemplo, combinando ícones gratuitos entre si. Ou usando efeitos de CSS

Em segundo lugar, a biblioteca incrível da fonte contém muitos ícones e todos estão incluídos em um arquivo. Se um designer de designer ou layout só precisar conectar alguns ícones, eles ainda precisam carregar completamente a biblioteca inteira. E estas são centenas de milhares de ícones extras que ocuparão espaço. No entanto, há uma solução aqui também - criando sua própria montagem, que incluirá apenas os ícones necessários.

Font Awesome Versões: 5 e 6

Font Awesome 5 foi lançada em 7 de dezembro de 2017 e originalmente continha 1278 ícones. A quinta versão vem em dois pacotes: livre (fonte incrível livre) e pago (Font Awesome Pro). O plano gratuito também contém ícones de todas as quartas versões. Os ícones estão disponíveis sob a licença Fonte Aberta Sil 1.1, Creative Commons Attribution 4.0 e MIT.

Font Awesome 6 é uma nova versão que foi lançada no segundo semestre de 2020. Inclui novos ícones e está disponível apenas em um plano pago.

Font Awesome 6 Alpha também está a caminho em 2021. Esta é outra nova geração de biblioteca de ícones. Além dos novos ícones, a versão 6 Alpha também adiciona novos estilos, novos serviços e ferramentas assistivas. Os usuários podem pré-encomenda.

Planos gratuitos e pagos: diferenças e características

Você pode baixar ícones para plano tarifário gratuito ou pago.

O plano gratuito inclui mais de 1600 ícones e 1 conjunto. Um kit é uma coleção de ícones, estilos e configurações que permitem que você faça alterações rapidamente sem adicionar código.

Tarifa paga:

• Inclui mais de 7800 ícones e 20 conjuntos.
• Fornece acesso à fonte Awesome Pro. Isso significa que os ícones podem ser usados ​​em aplicativos móveis nativos e no seu computador (por exemplo, em um editor de texto ou ao criar uma apresentação no PowerPoint).
• Permite que você carregue seus próprios ícones. Você pode usar seus próprios ícones ao lado ou no lugar da fonte oficial ícones incríveis. Por exemplo, é assim que você pode enviar um logotipo da empresa. Você pode executar as mesmas ações com seus próprios ícones como com os básicos - altere o estilo, tamanho, cor, etc.

Ambas as versões são perpétuas. Isto é, eles são fornecidos de uma vez por todas.

Maneiras de conectar a fonte incrível

Primeiro de tudo, você precisa ir ao site oficial e baixar a biblioteca. O arquivo baixado deve ser descompactado e as pastas CSS e Fonts copiadas para a pasta do site.

Depois disso, o caminho para o arquivo da biblioteca é especificado entre as tags da cabeça. Por exemplo:

Como exibir ícones impressionantes de fonte em um site. Métodos mais populares:

1.Using html.

O jeito mais fácil.

Você precisa ir para a galeria no site oficial (tornewesome.com/icons?d=gallery) e escolha o ícone que você gosta. Cada ícone tem um código pessoal, por exemplo:. É o suficiente para copiar e colá-lo no lugar certo no código.

2. Via CSS.

Para fazer isso, use os pseudo-elementos após ou antes, assim como o Unicode do ícone requerido. Você pode pegar tudo na mesma galeria. Um exemplo desse código: F209.

Um exemplo de uma entrada de arquivo de estilo:

div :: depois {display: bloco; Conteúdo: 'F209'; Font-família: 'Font Awesome 5 grátis';}

Em conclusão: todos os ícones impressionantes de fonte

Assim, a Font Awesome é uma maneira rápida e conveniente de adicionar ícones gratuitos ao seu site. Todos os ícones são facilmente escaláveis ​​e não diminuem o site.