Fontes de ícone são usadas para incluir determinados ícones padrão no conteúdo do seu site. o Fonte 'Incrível' é um bom exemplo que oferece muitas vantagens sobre outras fontes de ícones. Também sugerimos usar Fontes de ícones do Freepik como uma boa alternativa.
Font Awesome foi originalmente projetado por David Gandy Para uso com Bootstrap do Twitter. Font Awesome pode ser usado com WordPress usando o Plug-in Font Awesome Icons projetado por Raquel 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!'
- 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.
- 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?
- 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/
Vivek Nath.R.
No meu blog, estou usando o plugin de fontes Wp Exclusive Icon http://wordpress.org/extend/plugins/wp-elusive-iconfont/
A vantagem é que tem mais opções de personalização como alteração de cor, tamanho, orientação, etc. e também tem muitos outros ícones. Verifique isso.
Rajesh Namase
Obrigado Vivek por compartilhar este plugin do WordPress com nossos leitores.
James Dreesen
Ei Vivek, obrigado por compartilhar o plugin, estou procurando algo assim. Eu também experimentaria o Font Awesome Icons para ver qual é o certo para mim. Belo artigo, Rajesh, continue assim! Tudo de bom para você.
Rajesh Namase
Tente também usar o plugin Font Awesome WordPress :)
Andy
Olá, estava procurando algo assim, pois tenho preguiça de criar todas essas classes e adicionar estilos e imagens ao tema. Obrigado!!
Vipin
Obrigado Vivek e Rajesh, ambos forneceram as informações que eu procurava.
Rohit Chougale
oi rajesh
'diga-me sobre podemos reproduzir vídeo em php online se sim, então me diga como ..
Rajesh Namase
Você pode tentar usar tags de vídeo HTML 5 :) E é fácil usar HTML 5 com PHP :)
vaibhav
Definitivamente, adiciono este plugin ao meu acc do wordpress.
obrigado admin ..!
Anand Hittinali
bem, eu não sou um homem de muitas palavras, então este plugin é realmente útil para mim. obrigado por compartilhar este plugin.
Lírio
Existe um plugin para isso? Wow incrível minha primeira vez ouvindo isso. Obrigado por compartilhar isso.
Mohsin ali
Um plugin muito interessante, Rajesh, de onde você tirou essas idéias únicas.
David Croft
Olá,
obrigado por este blog legal, porque este tópico “Icon Fonts” é muito novo para mim, então eu posso saber muitas coisas novas e novas palavras dentro do seu blog.
O gerador de fontes é realmente as melhores fontes de ícones gratuitas disponíveis atualmente. então é muito útil.
David Johnson
Para sua informação, você usou o termo “gerador do Font Awesome”, mas seu artigo cobre o Font Awesome em si, não um gerador. A palavra “gerador” tem um significado específico no contexto de fontes de ícones. Exemplos de geradores de fonte de ícone que suportam Font Awesome incluem icnfnt e Fontello.
Rajesh Namase
Ok, atualizamos o título do artigo, obrigado.
Carlton
Você omitiu uma desvantagem significativa das fontes de ícone: elas não se degradam normalmente. Todos os usuários que têm o download de fontes desabilitado (porque são preocupados com a segurança, costumavam ser preocupados com a segurança e se esqueceram ou foram configurados por outra pessoa que estava ciente da segurança e não sabia) apenas veem símbolos de glifo vazios feios. Para ser um usuário responsável da fonte do ícone, você deve aceitar jogar esses usuários debaixo de um ônibus.
Ayush Agrawal
Este artigo parece um pouco antigo, mas eu gostaria de dizer que uma boa maneira de usar a fonte awesome é usando seu cdn: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Ajuda os blogueiros que procuram reduzir o tempo de carregamento.
Vikas
Belo post, Font Awesome é um dos melhores desenvolvimentos no mundo do design.
Mark Fox
Obrigado por compartilhar. Estou mais inclinado a usá-lo agora.
Gaurav Dutt
Cara! 2013, como eu poderia não ter visto isso antes, mas ainda funcionou perfeitamente para mim. Obrigado por isso.