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 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!'
- 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/
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.
Obrigado Vivek por compartilhar este plugin do WordPress com nossos leitores.
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ê.
Tente também usar o plugin Font Awesome WordPress :)
Olá, estava procurando algo assim, pois tenho preguiça de criar todas essas classes e adicionar estilos e imagens ao tema. Obrigado!!
Obrigado Vivek e Rajesh, ambos forneceram as informações que eu procurava.
oi rajesh
'diga-me sobre podemos reproduzir vídeo em php online se sim, então me diga como ..
Você pode tentar usar tags de vídeo HTML 5 :) E é fácil usar HTML 5 com PHP :)
Definitivamente, adiciono este plugin ao meu acc do wordpress.
obrigado admin ..!
bem, eu não sou um homem de muitas palavras, então este plugin é realmente útil para mim. obrigado por compartilhar este plugin.
Existe um plugin para isso? Wow incrível minha primeira vez ouvindo isso. Obrigado por compartilhar isso.
Um plugin muito interessante, Rajesh, de onde você tirou essas idéias únicas.
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.
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.
Ok, atualizamos o título do artigo, obrigado.
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.
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.
Belo post, Font Awesome é um dos melhores desenvolvimentos no mundo do design.
Obrigado por compartilhar. Estou mais inclinado a usá-lo agora.
Cara! 2013, como eu poderia não ter visto isso antes, mas ainda funcionou perfeitamente para mim. Obrigado por isso.