Fontes de ícones: prós e contras da incrível fonte

Fontes de ícone são usadas para incluir determinados ícones padrão no conteúdo do seu site. o Fonte 'Incrível' é um exemplo particularmente bom disso, que oferece muitas vantagens em relação a outras fontes de ícone. Originalmente desenhado por Dave Gandy Para uso com Bootstrap do Twitter, Font Awesome pode ser usado com WordPress usando o Plug-in Font Awesome Icons projetado por Rachel Baker.

Aqui está uma breve introdução a essas fontes e onde a fonte Awesome se encaixa em um estilo que pode ainda estar em sua infância.

Por que usar fontes de ícone

Quando você projeta um site, as imagens ocupam muito espaço na web devido ao tamanho dos arquivos. Eles também devem ser chamados para suas páginas da web usando marcação HTML. Não apenas isso, mas seu dimensionamento é frequentemente um problema, perdendo definição à medida que aumentam de tamanho. Uma imagem normal só é resolvida conforme o planejado quando usada em suas dimensões originalmente projetadas.

Quando você está procurando imagens de ícones padrão, como para veículos, certos caracteres de pontuação ou ícones de gráficos gráficos, as fontes de ícones podem oferecer imagens escaláveis ​​que parecem iguais, independentemente do tamanho da fonte. Isso ocorre porque as letras e os números têm a mesma aparência, independentemente de você usar um tamanho de fonte 2 ou 5 ou 10 ou 24 pontos.

Em muitos casos, as pessoas simplesmente não usam imagens por causa desse problema, e seu artigo ou relatório online sofre em detalhes ou clareza por causa disso. Ao usar o Font Awesome, eles podem adicionar ícones básicos a seus sites e dimensioná-los para o tamanho necessário, limitado apenas pelas dimensões de seus documentos - e podem fazer isso sem perder a definição. Você pode ver os ícones escalonáveis ​​da mesma forma que os caracteres de fonte escalonáveis.

Aqui está uma seleção do player de vídeo e dos ícones sociais disponíveis:

E também os novos ícones que vêm com a versão 3.0:

Cada um deles pode ser aumentado em tamanho sem perda de definição. Você pode alterar sua cor e facilmente adicionar sombras e alterar sua transparência. Na verdade, você pode fazer qualquer coisa com eles que você pode fazer com imagens, e mais algumas, sem as desvantagens do tamanho do arquivo.

Isso é basicamente o que as fontes de ícone podem fazer, e a fonte Awesome em particular. Aqui estão algumas informações sobre como usá-los e tirar o melhor proveito deles, e também uma ou duas desvantagens associadas às frentes de ícones:

Usando Font Awesome

Com CSS de bootstrap normal:

Font Awesome pode ser usado com o CSS Bootstrap padrão copiando o diretório de fontes Awesome para o seu projeto e, em seguida, copiando font-awesome.min.css para o projeto. Você deve então abrir font-awesome.min.css e editar os caminhos das fontes para garantir que apontem para o local Awesome.

Na seção Head do seu HTML, a localização do font-awesome.min.css deve ser referenciada assim:

O caminho da fonte sendo relativo ao seu diretório CSS.

Com menos bootstrap:

Se você estiver usando o Twitter Bootstrap com LESS CSS, primeiro copie o diretório de fontes Font Awesome em seu projeto e font-awesome-less em seu diretório Bootstrap Less. Então:

• a) Abra bootstrap.less e substitua @import “sprites.less”; com @import “font-awesome.less”;
• b) Abra o font-awesome.less do seu projeto e edite a variável @FontAwesomePath para apontar para o diretório de fontes.

@FontAwesomePath: "../font";

O caminho da fonte sendo relativo ao diretório CSS compilado.

Você está pronto - embora se estiver usando um compilador estático, você deve recompilar LESS.

Não usando bootstrap:

Se você não estiver usando o Bootstrap, depois de copiar o arquivo de fonte para o diretório do seu projeto, você pode copiar qualquer um dos dois arquivos fantásticos de fontes para o seu projeto, abra-o e edite a localização da fonte para apontar para o diretório da fonte.

Se você estiver usando o Internet Explorer 7, use font-awesome-ie7.min.css

Como usar fontes incríveis no WordPress

Existem duas maneiras fáceis de usar fontes de ícone no WordPress, uma das quais você carregou o plug-in *. Você pode incorporá-los usando HTML ou usar um shortcode. Aqui estão alguns exemplos de cada um:

Usando HTML: Onde você deseja que a fonte apareça, basta adicionar o nome do item ao nome da classe, assim: [html] [/ html]
irá adicionar um círculo preto.

Você pode alterar o tamanho do círculo assim:

Você provavelmente achará mais fácil adicionar o tamanho da fonte à sua folha de estilo CSS se pretende usar o mesmo tamanho de ícone com frequência e o formato acima para exceções.

Usando Shortcode: O shortcode é mais fácil, mas geralmente funciona apenas para postar e conteúdo da página na tela do editor de postagem. O formato é [nome do ícone = círculo do ícone] onde você deseja o círculo.

A desvantagem das fontes de ícone

As fontes de ícone parecem ótimas para usar quando você precisa adicionar um ícone específico ao seu blog ou site, e podem ser vinculadas para realizar funções específicas. No entanto, nem tudo é perfeito e as fontes de ícone também têm desvantagens. Esses são os problemas comuns relatados por usuários de fontes de ícone que não se aplicam ao Font Awesome - é por isso que é tão 'Incrível!'

1. Um é o problema potencial com leitores de tela que podem ler em voz alta o ícone como uma letra alfabética. Isso não é um problema com Font Awesome devido à maneira como os caracteres da fonte são recuperados.
2. Eles podem ser apresentados em apenas uma única cor - ou em um gradiente de cores usando gradientes CSS3. Isso é um problema genuíno com fontes de ícone?
3. Pode levar algum tempo para criar uma fonte personalizada para atender às suas necessidades. No entanto, já existe uma grande seleção de fontes incríveis oferecidas pelo Font Awesome, e a lista está continuamente sendo expandida. Embora seja uma fonte de código fechado gratuito, fontes aprovadas projetadas por usuários são adicionadas regularmente.

Resumo do gerador impressionante de fontes

O gerador Font Awesome é uma das melhores fontes de ícones gratuitas disponíveis atualmente. Embora tenha sido projetado para uso com o Twitter Bootstrap, ele pode ser adaptado para uso em sites regulares e também há um plugin para WordPress disponível que oferece o melhor dessa fonte de ícones. Se você usar fontes de ícone, experimente o Font Awesome porque você ficará agradavelmente surpreso ao dominá-lo.

* O plugin Font Awesome Icons WordPress está disponível em https://github.com/rachelbaker/