Nos primeiros tempos, os ícones estavam prontamente disponíveis, mas implementá-los eficientemente no WordPress era um pouco mais difícil. Podia-se contornar alguns problemas com os sprites, mas nem sempre eram uma boa maneira de avançar, e quando as telas de retina começaram a sair, o problema foi ampliado (muito literalmente).
Uma das soluções mais comuns para este problema é a utilização de uma fonte de ícones. Os ícones são fontes web ou vetores, portanto você pode escalá-los infinitamente e muitos ícones podem caber dentro de um único arquivo, diminuindo consideravelmente a sua contagem de pedidos. Isso permite que você use quase qualquer ícone que você possa sonhar. No entanto, com isto, também vêm algumas considerações de desempenho.
Mostraremos neste artigo algumas maneiras diferentes de usar fontes de ícones do WordPress, onde obtê-las e qual método pode ser o melhor para o seu site.
- Onde Encontrar Fontes de Ícones
- Maneiras rápidas e fáceis de usar as fontes de ícones
- Questão de Desempenho a Considerar com Fontes de Ícones
- Hospedar fontes de ícones localmente (Somente os que você precisa)
- Ícones Preocupações com a Acessibilidade das Fontes
Onde Encontrar Fontes de Ícones
Agora há muitos lugares excelentes para encontrar fontes de ícones para o seu site WordPress. Basta digitar “fonte de ícone” no Google para obter alguns resultados excelentes. Uma das mais populares e amplamente utilizadas é a Font Awesome. A partir do momento em que foi escrito, tem mais de 1.400 ícones livres, assim como mais de 4.500 ícones na sua versão profissional. Inclui ícones para quase tudo, desde interface, até social, setas, e muitos outros tipos de ícones.
Aqui estão mais alguns para verificar:
- O IcoMoon é outro serviço popular com mais de 5.500 ícones vetoriais gratuitos e mais de 4.000 ícones premium. Na verdade, estaremos usando a ferramenta geradora de fontes de ícones mais abaixo.
- Fontello é outro grande serviço que o ajuda a descobrir e construir fontes de ícones.
- Se você está procurando por um conjunto de ícones super leves, não deixe de conferir o Bytesize. Todos os 84 ícones medem em 9KB minified (2 KB em SVGZ, ou Gzipped).
- Se você quiser simplesmente usar ícones SVG manualmente, você não encontrará uma biblioteca gratuita melhor do que a iconmonstr ou uma biblioteca premium melhor do que a Iconfinder.
Maneiras rápidas e fáceis de usar os ícones da fonte WordPress
Primeiro vamos mergulhar em algumas das formas rápidas e fáceis de usar os ícones das fontes do WordPress. Aviso justo, nem todos estes são os melhores em termos de desempenho. Para isso, recomendamos saltar para a seção sobre o melhor método.
Opção 1 – Usar um Plugin WordPress
A maneira mais rápida de se pôr a funcionar com ícones de fonte WordPress é simplesmente usar um plugin de terceiros. O plugin gratuito Font Awesome Integration contém a mais recente biblioteca de ícones do Font Awesome 5. Depois de instalar e activá-lo, basta um simples código de atalho para inserir um ícone. Eles agora até têm um ícone WordPress! Bastante fixe.
Você pode conferir o gráfico de uso básico do Font Awesome 5 para formas adicionais de usá-lo e personalizá-lo, bem como sua biblioteca de ícones. Por exemplo, abaixo inserimos o ícone da Fonte Awesome do WordPress num bloco de atalhos do Gutenberg e adicionámos fa-3x para o tornar três vezes maior.
[fawesome iclass="fab fa-wordpress fa-3x"]
Aqui está o que parece na parte da frente. Bastante fácil, certo? Tínhamos um ícone de Font Awesome a funcionar no nosso site em apenas alguns minutos.
Se você deseja muito códigos de acesso fáceis de usar, também pode consultar o plugin Shortcodes Ultimate. Eles têm um complemento de ícones premium que você pode usar.
O acima é uma ótima solução se você quiser deixar seus clientes adicionarem ícones a posts ou páginas, mas se você quiser usar esses elementos dentro do seu tema ou plugin, o melhor é você mesmo inquiri-los (mergulhará nisto mais abaixo).
Opção 2 – Usar os Dashicons Embutidos
Dashicons é um conjunto de ícones de fontes incluído por padrão, uma vez que o WordPress o usa no backend. Você precisará perguntar no front-end, mas tudo que você precisa é o nome do script, o arquivo já está disponível para o WordPress.
Você pode adicionar o seguinte ao seu arquivo functions.php, ou recomendamos o uso de um plugin gratuito como o Code Snippets. Isto minimiza o risco de quebra do seu tema e as mudanças também serão persistentes durante as atualizações do tema.
function my_theme_styles() {
wp_enqueue_style( 'dashicons' );
}Você pode então ir ao site do Dashicons, selecionar um ícone e clicar no link “copy HTML” que lhe dará o código necessário para exibir o ícone. Eles não têm uma seleção enorme, mas ainda assim trabalham muito bem e são muito leves.
<span class="dashicons dashicons-admin-post"></span>Por exemplo, abaixo inserimos o ícone do tablier num bloco HTML do Gutenberg.
Aqui está o que parece na parte da frente.
Dashicons não tem nenhum atalho legal com ele fora da caixa, mas você pode personalizar o tamanho dos seus ícones com CSS. Aqui está um exemplo de inserção de um ícone mesmo antes de um cabeçalho.
<h2 class="dashicons-before dashicons-smiley">My Cool Headline</h2>Opção 3 – Link Manual para Fontes de Ícones Hospedados Externamente
A sua terceira opção é ligar-se manualmente a fontes de ícones hospedados externamente. Isto é essencialmente o que o plugin da opção 1 acima está a fazer nos bastidores.
Para o Font Awesome, você pode pegar o código da página inicial deles e então seguir os passos abaixo. Eles hospedam todas as suas fontes em um CDN de graça para você. Vai parecer algo parecido com isto:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-xxxxx" crossorigin="anonymous">Passo 1
Copie o código para a <head> de cada modelo ou página do seu site WordPress onde você quer usar a fonte Font Awesome. Você pode editar o arquivo header.php do seu tema ou melhor ainda, siga nosso simples tutorial sobre como adicionar código ao seu cabeçalho.
Passo 2
Você pode então começar a colocar ícones no seu HTML’s <body>. Encontre o ícone certo e aprenda como adicioná-lo à sua página.
Problema de Desempenho a Considerar com o Uso de Fontes de Ícones
Embora não haja nada de errado em usar uma das maneiras acima para adicionar fontes de ícones ao seu site, elas não são tecnicamente a melhor maneira. Porquê? Tudo se resume a questões de desempenho.
Provavelmente não precisas de todos esses ícones.
Primeiro, quando você usa um plugin para fontes de ícones ou um link para uma biblioteca de fontes de ícones externos, ele vai carregar todos os ícones de toda a sua biblioteca. Se você estiver usando apenas cerca de 20 ícones em todo o seu site, isso pode ser tratado de uma maneira muito melhor.
Por exemplo, incluímos a biblioteca Font Awesome 5 em nosso site e enquanto o arquivo CSS para ele é pequeno, o arquivo da fonte em si é de 108 KB. Embora isto possa não parecer tão grande, você verá mais abaixo como o arquivo fica pequeno quando escolhemos apenas as HTML fontes que realmente estamos usando.
Carregar de um CDN é normalmente mais rápido
Em segundo lugar, não há nada de errado em carregar scripts de diferentes CDNs. No entanto, se você tiver a opção de carregá-lo a partir de um CDN, isso geralmente é mais rápido. Porquê? Porque pode tirar partido de uma única ligação HTTP/2 e reduzir a procura adicional de DNS. Apenas certifique-se que o seu CDN principal é um bom CDN!
Hospedar fontes de ícones localmente (Somente os que você precisa)
Por causa das razões de desempenho mencionadas acima, nós vamos lhe mostrar como hospedar suas fontes de ícones localmente, além de usar apenas aquelas que você precisa. Por local entendemos carregá-los a partir do servidor do seu servidor WordPress ou do seu próprio CDN.
Ao escolher apenas as fontes de ícones que você precisa, isso pode reduzir o tamanho do arquivo de 100 KB para um par de kilobytes, muito útil! Melhor ainda: você pode até mesmo misturar e combinar ícones de vários conjuntos de fontes.
O Fundamento – Como Funciona
Usar um ícone de fonte envolve hospedar o arquivo de fonte (WOFF, WOFF 2, etc.) no seu servidor web, depois usar CSS para carregar a face da fonte, depois criar alguma marcação para adicionar os ícones no lugar correto.
Enquanto seu site carregará um único arquivo, você acabará tendo um número de formatos de arquivo para cada fonte, já que alguns navegadores utilizam formatos diferentes. O Font Awesome tem 6 formatos de arquivo diferentes incluídos: EOT, SVG, TTF, WOFF, WOFF 2 e OTF. No entanto, com base no suporte do navegador, você realmente só precisa de WOFF ou WOFF 2.
Dica: WOFF é suportado por 93%+ de todos os navegadores modernos. No entanto, WOFF 2 é mais comprimido, mas só é suportado por 83%+ de todos os navegadores modernos. Recomendamos a escolha de um ou outro ou ambos. O navegador irá determinar com base no seu código qual entregar ao cliente.
Sua primeira tarefa é usar uma ferramenta para escolher apenas os ícones que você deseja. Você pode então adicionar esses arquivos ao diretório do seu projeto em algum lugar, normalmente em um diretório de fontes.
Em seguida, você adiciona o arquivo CSS Font Awesome ao seu projeto e o adiciona ao seu site usando um elemento de link antigo regular.
<link rel="stylesheet" href="css/font-awesome.min.css">Você também pode consultar o arquivo CSS ou, se ele for pequeno, simplesmente usá-lo em linha.
Se você olhar para o arquivo CSS, você pode ver o que está acontecendo em segundo plano. Os arquivos de fonte são carregados, o elemento básico com a classe .fa é definido (junto com alguns outros), e finalmente, cada ícone nomeado é definido (por exemplo: .fa-book).
A única coisa que você precisa estar atento é o caminho para seus arquivos de fontes. Por padrão, eles são carregados a partir de .. /fonts que será o diretório de fontes, uma pasta acima do arquivo CSS atual. Você pode precisar mudar isso para se adequar à sua própria estrutura de diretórios.
Agora que você tem uma idéia melhor de como funciona, nós vamos adicionar o passo-a-passo de como fazê-lo. Neste exemplo, estamos a utilizar um site de comércio eletrônico de produção.
Passo 1
Primeiro, você deve determinar qual biblioteca de ícones de fontes você quer usar. No início deste artigo, compartilhamos alguns que gostamos. Neste exemplo, vamos usar a fonte Font Awesome juntamente com o gerador de fontes IcoMoon. Se você quer os arquivos WOFF 2 da IcoMoon, você tem que pagar uma taxa única de US$ 9,00 para acessar sua biblioteca premium.
Você pode baixar os ícones Font Awesome que você quer manualmente de graça, mas você precisaria usar uma ferramenta como FontForge para editar manualmente seu arquivo WOFF ou WOFF 2. Somos todos fáceis, por isso estamos a usar um gerador.
Passo 2
Vai para o gerador IcoMoon. Clicamos em “Adicionar” na biblioteca da Font Awesome.
Passo 3
A seguir, você vai querer escolher os ícones que deseja usar no seu site WordPress. Se você já está usando a fonte Font Awesome e está simplesmente mudando para versões hospedadas localmente, faça uma pequena lista e depois escolha-as na biblioteca.
Neste exemplo, estamos escolhendo ícones para perfmatters.io, um site de comércio eletrônico WordPress que roda Easy Digital Downloads.
Passo 4
Depois de escolher todos os seus ícones, escolha “Generate Font” na parte inferior. Para este site, acabámos por precisar de 20 ícones.
Você vai acabar com arquivos que se parecem com isto. O importante é o arquivo style.css e os arquivos de fontes (WOFF, WOFF 2).
Passo 5
A seguir, é recomendado que você faça um find and replace no style.css antes de fazer o upload/copy no seu site. Aqui está o aspecto do original.
Para aqueles que já utilizam a Fonte Awesome, isto simplesmente facilita a mudança das classes para as Font Awesome, desta forma, se já havia algo codificado no seu site WordPress com ele, ele começará automaticamente a utilizar os ícones.
Então faça um Find para “ícone” e substitua todas as ocorrências por “fa”. Você deve ser capaz de fazer uma busca rápida e substituir por um editor de texto como o Sublime.
Isto substitui [class^="icon-"], [class*=" icon-"] por [class^="fa-"], [class*=" fa-"]. Ele também corrige cada ícone, assim, em vez de começar com .icone-, eles agora começam com .fa-.
Você também pode precisar alterar a URL de origem com base no local onde você carrega seus arquivos de fonte no Passo 7. Recomendamos mudar a URL para o seu CDN.
Passo 6
A seguir, você precisa adicionar o CSS ao seu site. Há algumas maneiras de você fazer isso.
Opção 1
Como a quantidade de CSS é muito pequena, você poderia copiar todo o CSS do arquivo e colá-lo no WordPress Customizer. Nunca faça isso para arquivos grandes, mas esta é uma quantidade relativamente pequena de CSS. Isto significa que será carregado em linha no seu site.
Opção 2
Você pode fazer um link manualmente para a sua folha de estilo, colocando-a no cabeçalho do seu site WordPress. Dica: Ligue-se a ele em seu próprio CDN para um desempenho mais rápido.
<link rel="stylesheet" href="https://cdn.yourdomain.com/fonts/style.css">Opção 3
Você também pode consultar o arquivo CSS no WordPress. O processo é muito semelhante à forma manual. Adicione o seguinte ao arquivo functions.php do seu tema ou utilize o plugin gratuito Code Snippets. Você pode precisar mudar o diretório com base no local onde você o carrega.
function my_theme_styles() {
wp_enqueue_style( 'FontAwesome', get_template_directory_uri() . '/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );Passo 7
Agora que você tem o CSS adicionado ao seu site, é hora de carregar os arquivos de fontes. Você pode colocar as fontes em qualquer lugar, uma pasta chamada “fontes” no seu /public diretamente está bem. Lembre-se, no entanto, que a pasta de origem no seu arquivo style.css precisa corresponder.
Passo 8
Agora o seu site WordPress deve ter seus arquivos CSS e fontes acessíveis. Então, a seguir, você pode adicionar alguma marcação ao seu site. Este é apenas um exemplo de como adicionar um ícone de engrenagem.
<i class="fa fa-cog"></i>Você pode ver um exemplo ao vivo disso funcionando na perfmatters.io. Tenha em mente que você pode usar qualquer elemento, não apenas i. Você pode usar elementos de span regular também, além de adicionar CSS às suas classes personalizadas.
A verdadeira diferença é quando você dá uma olhada na diferença de tamanho. Lembre-se, quando fizemos a ligação à biblioteca externa Font Awesome, o tamanho total do ficheiro da fonte era 108 KB. Depois que usamos um gerador de fontes e escolhemos apenas os ícones Font Awesome que precisávamos para o site, ele reduziu o arquivo de fontes para 2.6 KB. O nosso arquivo de fontes diminuiu em 97,59%!
Não só isso, mas agora também carrega a partir do nosso CDN, o que significa que não existem pesquisas adicionais de DNS para o fontawesome.com.
Você também pode usar esta mesma abordagem com ícones SVG, é apenas ligeiramente diferente.
Ícones Preocupações com a Acessibilidade das Fontes
Uma desvantagem das fontes de ícones é a sua horrível acessibilidade. Os leitores de tela podem ignorá-los, ou pior ainda, ler o unicódigo ou o próprio personagem. Isso resultaria em pessoas com deficiência visual ouvindo “estrelas amarelas favoritas” ao olhar para o seu item de menu favorito – não é o ideal. Você também deve levar em conta o que acontece se as fontes não forem carregadas.
Idealmente, você gostaria que os ícones decorativos simplesmente desaparecessem quando não estivessem carregados e que os ícones críticos fossem substituídos por texto se houvesse um problema.
A questão da acessibilidade é bastante fácil de tratar, basta usar o parâmetro aria-hidden="true" e valor para indicar aos leitores de tela que eles devem descartar nosso elemento.
<span class="icon icon-star" aria-hidden="true"></span> My FavouritesEm uma implementação mais completa, você também pode usar o Modernizr para testar o suporte à fonte. Você precisará modificar ligeiramente o CSS, veja o excelente artigo Bulletproof Font Icons para obter informações mais detalhadas.
Para obter informações sobre a criação de ícones críticos com texto fallback, também recomendamos a leitura do artigo acima, eles explicaram e resolveram o problema da melhor forma possível, mas implementá-lo está um pouco fora do escopo deste artigo.
Resumo
Isso é tudo o que há para iconizar as fontes. Agora você conhece algumas maneiras diferentes de obter facilmente fontes de ícones no seu site WordPress, ao longo da melhor maneira de implementá-las quando se trata de desempenho.
Recomendamos sempre o uso de um gerador de fontes para construir uma fonte de ícones que consiste apenas naqueles ícones que você usa. Isto tornará o seu tema consideravelmente mais ágil! Se você tem uma biblioteca ou gerador favorito que não mencionamos, por favor nos avise. Há um número razoável de bons por aí! Não deixe também de ler o nosso guia detalhado sobre fontes WordPress.
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Deixe um comentário