Revisão impressionante da fonte – o que é? É bom? E como usá-lo com WordPress?

Ofertas do WordPress


Se você está procurando uma revisão do Font Awesome em uma única frase, aqui está: ‘Isso é legal … e funcional … e meio brilhante em sua simplicidade’. Isso basicamente resume minha primeira experiência com este incrível kit de ferramentas.

Essa experiência foi há um tempo atrás, no entanto. Por um tempo, fiquei viciado. Usei-o para um monte de coisas e fez meu conteúdo aparecer, mas, como geralmente acontece, a emoção inicial começou a desaparecer.

Mas vamos adiar isso por enquanto e, em vez disso, iniciaremos a revisão do Font Awesome – na qual abordaremos o que é o Font Awesome, se é bom ou não e, talvez o mais importante, como usá-lo com o WordPress – no começando.

O que é fonte impressionante?

Revisão do Font Awesome

Em poucas palavras, Font Awesome é uma fonte de ícone.

Pense em fonte comum, mas em vez de letras, você obtém ícones.

Esta é a parte verdadeiramente brilhante e revolucionária da coisa toda.

Os ícones já foram uma grande dor ao criar um site. Você raramente pode encontrar os corretos – especialmente se você precisar de mais do que alguns deles para ter o mesmo estilo. (Dez ícones com designs consistentes? Esqueça!) E mesmo que você os tenha encontrado de alguma forma, a qualidade não era a mesma se você quisesse usá-los em tamanhos diferentes. Para encurtar a história, para obter os ícones certos, você precisa projetá-los.

Com o tempo, as coisas melhoraram um pouco, com vários pacotes de ícones surgindo aqui e ali (mercados, pequenos sites). Mas isso ainda não era exatamente perfeito. Mesmo com esses sites, você ainda precisava procurar ícones por conta própria, em vez de ter algum tipo de biblioteca facilmente acessível.

É aqui que o Font Awesome entra em ação.

Depois de conectar seu site ao Font Awesome, você pode acessar todos os ícones através de uma simples tag HTML. Por exemplo, para obter este ícone legal:

ícone do carro

… Tudo o que preciso fazer é usar um pedaço de código como este:

O Font Awesome o pegará e o converterá em um ícone ao vivo. E você também pode personalizar esses ícones também. Você pode alterar os tamanhos, cores e tons – basicamente, você pode fazer qualquer coisa possível através do CSS. Até onde você sabe, esses ícones se comportam como qualquer outra fonte.

O Font Awesome também oferece algumas coisas exclusivas, como a possibilidade de animar seus ícones. Então, em vez de uma versão estática como esta:

ícone estático

… você pode obter algo parecido com isto:

rotação do ícone

E isso pode ser feito com qualquer ícone do Font Awesome.

Portanto, a questão é:

É bom?

Na minha opinião, os principais pontos fortes do Font Awesome são:

  • a biblioteca é muito grande, atualmente com mais de 630 ícones
  • cada ícone é fácil de acessar depois que você integra seu site à biblioteca principal
  • são todos vetores, para que você possa fazer o que quiser com a maneira como os ícones são exibidos
  • é muito fácil adicionar um ícone em qualquer lugar.

Francamente, o Font Awesome faz o que faz muito bem, excepcionalmente bem.

Para completar, não há muita curva de aprendizado. Depois de instalar o Font Awesome no seu site, tudo o que você precisa fazer é:

  • navegue pelos ícones disponíveis para obter uma boa visão geral do que está lá
  • confira os exemplos (trate-os como um guia rápido de como fazer).

A qualidade visual dos próprios ícones também é muito alta. Um problema comum com muitos pacotes de ícones disponíveis na Web é que eles tendem a ficar bem apenas em tamanhos específicos, devido a coisas como detalhes muito ou pouco, formas pouco claras etc. Mas os ícones Font Awesome não são assim. Parece que eles foram projetados para funcionar em qualquer lugar e ter uma ótima aparência, independentemente do tamanho que você deseja usar. Além disso, lembre-se de que todos eles são vetores, portanto, o dimensionamento também não é um problema técnico..

Mais importante, os ícones Font Awesome alcançam três objetivos principais em termos de design:

  • Os designs são consistentes de ícone para ícone, para que tudo se encaixe.
  • Os designs são muito mínimos, o que ajuda os ícones a atender a vários propósitos (eles parecem especialmente bons para elementos de navegação).
  • A quantidade se torna uma qualidade – não importa quantos ícones você precise, o Font Awesome poderá fornecer.

Ok, vamos para a parte de instruções da revisão:

Como usar a fonte Awesome com WordPress?

Todos esses elogios à parte, vamos ver como podemos usar o Font Awesome com o WordPress.

E … há um problema.

Ou melhor, há um problema se você nunca esteve na seção ‘aparência / editor’ do wp-admin.

Aqui está o que eu quero dizer:

Para instalar o Font Awesome no seu site WordPress, você tem duas opções:

  • Instalação manual
  • Via plugins

E aqui está o exemplo: Font Awesome é um dos poucos casos em que fazer as coisas da maneira manual é realmente melhor do que usar plug-ins.

Vamos desviar um pouco da revisão principal e mostrar a você:

Se você estiver procurando por um plugin Font Awesome, provavelmente encontrará estes dois:

  • Melhor fonte impressionante – exiba ícones da fonte impressionante em qualquer lugar do conteúdo do seu blog.
  • Font Awesome 4 Menus – exibe ícones de Font Awesome nos menus.

Enquanto ambos tecnicamente fazem seu trabalho, existem alguns problemas.

Começando com o Better Font Awesome, como você imagina, obter a funcionalidade é simples – basta instalar e ativar o plug-in (você não precisa acessar o próprio Font Awesome ou algo assim). Tudo que você precisa é o plugin.

Após a instalação, você recebe esta caixa na tela de edição posterior:

inserir ícone via plugin

Ao clicar nele, você poderá escolher um ícone de Fonte impressionante e incluí-lo como um código curto. Legal.

Isso funciona na maioria das vezes, a julgar pelas críticas. Mas não sempre. Por exemplo, para mim, atrapalhou totalmente meu CSS – como em todo o meu estilo de tema parou de funcionar (e é o tema padrão do Twenty Fifteen de que estamos falando aqui, então nada sofisticado).

Agora, não estou dizendo que o plug-in também causará esses problemas, mas é provável que você se depare com vários problemas como esse ao longo do tempo – especialmente quando novas versões do Font Awesome ou WordPress forem lançadas. Isso pode não valer a pena. Imagine que um dia você atualiza seu site e seu CSS desaparece. Quanto tempo você leva para retornar o problema a um plug-in específico? Enquanto isso, quantos visitantes verão o site despojado?

Agora, sobre o outro plugin, Font Awesome 4 Menus. Isso funciona e parece estar funcionando razoavelmente bem. Tudo o que você faz é instalá-lo e, em seguida, você pode adicionar classes personalizadas aos seus itens de menu, da seguinte maneira:

adicionar classe de ícone

As classes são as mesmas listadas na documentação oficial do Font Awesome. O plugin cuida da cor do ícone para combinar com o menu, o espaçamento, tudo.

ícones do menu

É muito bom se você só precisa do Font Awesome para seus menus, mas, infelizmente, não funciona se você deseja exibir ícones no conteúdo. Anexo (a):

ícone ausente

Na minha opinião sincera, será melhor integrar o Font Awesome ao seu site WordPress manualmente, sem plugins. Há menos problemas a longo prazo, e a integração parece ser muito mais estável.

Como integrar fonte impressionante com WordPress

Essencialmente, conforme detalhado aqui, você pode fazer isso de duas maneiras diferentes:

  • Obtenha o código de incorporação direta diretamente do Font Awesome.
  • Faça o download do pacote e faça o upload para o seu servidor via FTP.

Inicialmente, fiquei tentado a fazer o download e hospedá-lo, mas percebi que isso significaria apenas trabalho adicional. Concedido, obter o pacote em si e enviá-lo via FTP não é muito trabalhoso (#lazy), mas você também precisa mantê-lo atualizado.

Ao lidar com uma incorporação, por outro lado, tudo é resolvido por você. E, deixando de lado todo o trabalho de manutenção, você também recebe o pacote de uma CDN, o que também é melhor para o desempenho.

A parte de instruções é muito simples, basta digitar seu email e obter o código de incorporação entregue a você:

começar com o Font Awesome

O Font Awesome enviará um e-mail de boas-vindas com seu código de incorporação, além de uma opção para registrar esse código, o que oferece algumas vantagens adicionais. (Observação: isso não é obrigatório, você não precisa se registrar para obter a principal funcionalidade do Font Awesome.)

Assim, depois de ter seu código, basta ir para a seção ‘aparência / editor of do seu wp-admin (sempre faça um backup de todo o site e de todos os arquivos individuais antes de fazer alterações) e adicione esse código na seção do seu tema. Isso geralmente está no arquivo header.php, da seguinte forma:

seção principal

Nota: Lembre-se de que, se você atualizar seu tema, essa integração com o Font Awesome desaparecerá e será necessário refazê-lo. No entanto, ao usar um tema filho (como mencionado em um artigo anterior), não existe esse problema.

Logo após incluir o código de incorporação, você ativou o Font Awesome em seu site. Trabalho feito – agora você pode começar a usar todos os ícones como desejar!

Opcional: Registrando sua conta impressionante da fonte

Como mencionei, ao obter o código de incorporação, você também tem a chance de registrar sua conta no Font Awesome. Isso não é necessário, mas eu realmente recomendo que você faça isso. A conta é gratuita e você recebe algumas coisas em troca:

  • A capacidade de configurar sua incorporação.

Font Awesome incorporar personalização

  • Algumas estatísticas legais sobre os ícones que você está usando.

Vale a pena ir Premium?

Algo que eu não sabia a princípio era que a Font Awesome também oferecia uma versão premium do produto chamada Fort Awesome.

As principais coisas a saber sobre isso:

  • Tem milhares mais ícones. Com o Fort Awesome, você obtém vários ícones adicionais divididos em conjuntos individuais (temáticos, diferentes estilos de design etc.). Isso permite que você atenda a todas as necessidades de ícones do site por meio de uma ferramenta – especialmente se você precisar de um conjunto muito específico de itens para representar por meio de ícones.
  • Você pode fazer upload e usar seus próprios ícones. Isso é legal porque permite que você faça o upload de itens como seu logotipo, ícones de produtos ou qualquer outra coisa que faça sentido e adicione-os à sua biblioteca do Font Awesome. A força aqui é que você poderá usar esses ícones como qualquer outro ícone do Font Awesome – todos os seus ícones funcionam de forma consistente, independentemente da fonte.
  • Você obtém configurações personalizadas. Você pode definir os domínios em que seus kits de ícones podem ser usados ​​etc..
  • Você pode incluir tipos de letra em seus kits. Você pode escolher entre algumas das melhores fontes gratuitas ou enviar as suas. Isso mantém os recursos de tipografia do site em um só lugar.
  • Você pode carregar tudo isso através de uma CDN otimizada fornecida via MaxCDN.

No final, o núcleo da oferta premium do Font Awesome é sua facilidade de uso, aprimoramentos de desempenho e gerenciamento fácil geral de todos os seus ícones e tipos de letra.

Os planos começam em US $ 49 por ano (há um teste gratuito). Aqui está o que está dentro:

Fort Awesome planos

Dito isto, essa oferta premium provavelmente é algo que apenas beneficiará sites maiores, lojas de comércio eletrônico ou sites temáticos. No final do dia, você provavelmente precisará de apenas alguns ícones no seu site e não os atualizará com muita frequência – pelo menos se estivermos falando de blogs WordPress padrão.

Por outro lado, empresas como lojas de comércio eletrônico podem criar ícones personalizados para produtos individuais ou usar vários kits de ícones para tornar suas páginas mais atraentes para o comprador. Mas ainda é tudo sobre o volume. Pequenos catálogos de produtos podem funcionar muito bem com ícones criados para cada produto manualmente, sem o Font Awesome, para que ainda não se beneficiem muito dos pacotes premium.

Além disso, vale ressaltar que o Font Font premium não é um tipo de pacote “tudo incluído”. Existem kits de ícones pagos adicionais (até US $ 50 por peça), então você ainda pode pegar sua carteira mesmo depois de receber a oferta premium.

Tudo se resume a que o Fort Awesome (premium do Font Awesome) não é necessariamente a melhor opção para a maioria dos blogs do WordPress. Sinceramente, acredito que aceitar a oferta gratuita provavelmente satisfará suas necessidades 99% do tempo.

Quando se trata de premium, provavelmente é um bom investimento se você administra um site maior que depende de representações visuais de vários itens, produtos ou menus e adiciona novos elementos à biblioteca com muita frequência. Nesses cenários, você também se beneficiará da entrega de CDN da Font Awesome, tornando seu site mais rápido no processo.

Conclusão

Eu realmente acho que o Font Awesome é um ótimo produto. Nunca foi tão fácil incorporar ícones legais e bem projetados em seu site. Você é literalmente apenas um afastar (quase?) o ícone perfeito para o que você deseja visualizar.

Fonte impressionante em poucas palavras:

  • Fonte Awesome free: Sim, sim, sim.
  • Fonte Impressionante premium (Fort Awesome): Meh.
  • Vários plug-ins impressionantes do WordPress: Ok, mas não impressionante.

E, finalmente, também enfatizamos que o Font Awesome é um projeto de código-fonte totalmente aberto que você pode usar para qualquer finalidade, inclusive comercial – você não precisa pagar taxas adicionais nem pedir permissão a ninguém.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me