• Ir para a navegação primária
  • Ir para o conteúdo principal
  • Ir para o rodapé

TechLila

Bleeding Edge, sempre

  • CFL
  • Sobre
  • Contato
  • Ofertas e ofertas
Logo Techlila
FacebookTweetLinkedInpinoações76
Mecanismos de jogos HTML5
A seguir

Faça seu próprio jogo HTML5 com mecanismos de desenvolvimento HTML5

Fonte Incrível Fonte Icônica Exa

TechLila Web Design e Desenvolvimento

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

Avatar de Rajesh Namase Rajesh Namase
Última atualização em: 14 de março de 2023

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:

Exemplos de fontes icônicas incríveis

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

New Icons Font Fonte icônica incrível

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/

Divulgação: O conteúdo publicado no TechLila é suportado pelo leitor. Podemos receber uma comissão por compras feitas por meio de nossos links de afiliados sem nenhum custo extra para você. Leia nosso Página de isenção de responsabilidade para saber mais sobre nosso financiamento, políticas editoriais e formas de nos apoiar.

Compartilhar é se importar

FacebookTweetLinkedInpinoações76
Avatar de Rajesh Namase

Rajesh Namase

Rajesh Namase é um blogueiro profissional e fundador do blog TechLila. Além disso, ele é um empresário apaixonado, comerciante da Internet e fanático por fitness.

Categoria

  • Web Design e Desenvolvimento

Tags

Font Incríveis

Interações leitor

O que as pessoas estão dizendo

  1. Avatar de Vivek Nath.RVivek 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.

    Resposta
    • Avatar de Rajesh NamaseRajesh Namase

      Obrigado Vivek por compartilhar este plugin do WordPress com nossos leitores.

      Resposta
    • Avatar de James DreesenJames 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ê.

      Resposta
      • Avatar de Rajesh NamaseRajesh Namase

        Tente também usar o plugin Font Awesome WordPress :)

        Resposta
  2. Avatar de AndyAndy

    Olá, estava procurando algo assim, pois tenho preguiça de criar todas essas classes e adicionar estilos e imagens ao tema. Obrigado!!

    Resposta
  3. Avatar de VipinVipin

    Obrigado Vivek e Rajesh, ambos forneceram as informações que eu procurava.

    Resposta
  4. avatar de rohit chougaleRohit Chougale

    oi rajesh

    'diga-me sobre podemos reproduzir vídeo em php online se sim, então me diga como ..

    Resposta
    • Avatar de Rajesh NamaseRajesh Namase

      Você pode tentar usar tags de vídeo HTML 5 :) E é fácil usar HTML 5 com PHP :)

      Resposta
  5. avatar de vaibhavvaibhav

    Definitivamente, adiciono este plugin ao meu acc do wordpress.
    obrigado admin ..!

    Resposta
  6. Avatar de Anand HittinaliAnand Hittinali

    bem, eu não sou um homem de muitas palavras, então este plugin é realmente útil para mim. obrigado por compartilhar este plugin.

    Resposta
  7. Avatar de LírioLírio

    Existe um plugin para isso? Wow incrível minha primeira vez ouvindo isso. Obrigado por compartilhar isso.

    Resposta
  8. Avatar de Mohsin AliMohsin ali

    Um plugin muito interessante, Rajesh, de onde você tirou essas idéias únicas.

    Resposta
  9. Avatar de David CroftDavid 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.

    Resposta
  10. Avatar de David JohnsonDavid 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.

    Resposta
    • Avatar de Rajesh NamaseRajesh Namase

      Ok, atualizamos o título do artigo, obrigado.

      Resposta
  11. Avatar de CarltonCarlton

    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.

    Resposta
  12. Avatar de Ayush AgrawalAyush 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.

    Resposta
  13. avatar de vikasVikas

    Belo post, Font Awesome é um dos melhores desenvolvimentos no mundo do design.

    Resposta
  14. Avatar de Mark FoxMark Fox

    Obrigado por compartilhar. Estou mais inclinado a usá-lo agora.

    Resposta
  15. Avatar de Gaurav DuttGaurav Dutt

    Cara! 2013, como eu poderia não ter visto isso antes, mas ainda funcionou perfeitamente para mim. Obrigado por isso.

    Resposta

Adicione seu comentário cancelar resposta

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

Logotipo do rodapé Logotipo do texto do rodapé

Rodapé

Sobre

Olá e bem-vindo ao TechLila, o famoso blog de tecnologia onde você pode encontrar artigos úteis para dominar o básico e muito mais.

Na TechLila, nosso principal objetivo é fornecer informações exclusivas, como dicas e truques de qualidade, tutoriais, guias de procedimentos no Windows, Macintosh, Linux, Android, iPhone, Segurança e alguns subtópicos diversos, como análises.

Ligações Úteis

  • Sobre
  • Contate-nos
  • Negação de responsabilidade
  • Política de Privacidade
  • Condições

Siga-nos

Tema personalizado usando Genesis Framework

Hospedagem em nuvem pela Cloudways

Língua

© Copyright 2012–2023 TechLila. Todos os direitos reservados.

x
x