Como Fazer Upload de Ícones ao WordPress – Guia para Iniciantes

Fontes de ícones para WordPress são uma parte crucial de qualquer site feito em WordPress. Eles incrementam a responsividade de um site pelo design das páginas.

Percebeu que temos alguns ícones espalhados pelo nosso site? Um deles é o ícone home, que está localizado na barra de navegação.

Bem, se você quer saber adicionar ícones como esse no seu próprio site, a hora é esta. Sente e relaxe, pois vamos ensinar você a fazer exatamente isso.

Por Que Usar Ícones WordPress?

Fontes de ícones são tipologias que contêm símbolos especiais e pictogramas, ao invés de letras e símbolos regulares. Eles podem ser usados para mostrar os ícones mais usados através de pequenas gravuras.

Alguns exemplos de fontes de ícones que você pode encontrar pelo nosso blog são botões de redes sociais. Quando você quer, por exemplo, compartilhar um conteúdo de um site na sua conta do Facebook, é só clicar no botão da respectiva rede.

Antes das fontes de ícones existirem, todos os ícones na web e slides eram imagens simples. Pelas imagens não serem escaláveis e nem responsivas, é comum que o carregamento de páginas de torne lento e atrapalhem no ranqueamento nos motores de busca.

Então, as fontes ícones chegaram como uma alternativa que funciona e se adapta em qualquer tipo de tela ou resolução. Além de também pesarem bem menos na questão do carregamento.

Fontes de ícones são imagens vetoriais. Por isso, elas são infinitamente escaláveis.

Elas são uma função ótima para designs responsivos porque você pode manipular os ícones que você for criar de acordo com as suas necessidades. Existe uma variedade de opções – mudar o tamanho do ícones, a cor, a rotação, adicionar efeitos e muitos mais. Tudo isso pode ser feito pelo CSS, sem qualquer perda de qualidade.

E uma das coisas mais legais é que eles são relativamente fáceis de implementar. Além disso, as fontes ícones WordPress permitem que você armazene muitos símbolos dentro de um mesmo arquivo. Isso pode reduzir o número de solicitações HTTP.

Ainda que exista outras formas de adicionar ícones, as fontes de ícones continuam sendo muito usadas porque você consegue achar opções gratuitas facilmente. Ou até mesmo criar o seu próprio ícone para usar no seu site.

Fontes Gratuitas de Ícones

Existem algumas opções de fontes ícones disponíveis para seu site WordPress. Algumas delas são IcoFont, Font Awesome, We Love Icon Fonts e IcoMoon. Elas são, inclusive, as mais recomendadas.

Icofont é uma fontes de ícones para wordpress gratuita

IcoFont é uma das maiores fontes de ícones fontes gratuitas na internet. Ela oferece mais de 2 mil ícones em um fonte única e que é organizada e distribuídas em 30 categorias. Ela também permite que você crie seu próprio ícone personalizado.

Você pode fazer o download diretamente do site do IcoFont. Isso pode ser feito tanto com a cópia do código HTML do ícone ou clicando no botão de download na página do site.

Simplesmente navegue pelos ícones que você escolheu, adicione a sua coleção e faça o download deles. Depois de fazer o download, você vai ter acesso ao arquivo .ZIP contendo CSS, exemplos e fontes. As linhas HTML dos ícones baixados são pareados juntos com o Unicode deles na pasta de exemplos.

Se você quer usar os ícones diretamente pela web, você pode copiar o diretório IcoFont inteiro para a pasta do seu projeto. Mas, certifique-se se referenciar a localização para o seu icofont.min.css no cabeçalho.  

Font Awesome é site de ícones para wordpress

Outra fonte conhecida para conseguir fontes para ícones é o Font Awesome. O site oferece mais de 1500 fontes gratuitas e mais de 500 ícones profissionais que cobrem mais de 70 tipos de ícones dentro de 4 categorias principais – sólido, regular, leve e marcas.

We Love Icon Fontes é um site de ícones para wordpress

O We Love Icon Fonts é outra fontes que permite que você crie seus próprios ícones com a ajuda de um criador de fontes. Para isso, você só precisa criar em Add (adicionar) e conseguir um código CSS para incorporar o ícone no seu site.

iconmoon é um site de fontes de ícones para wordpress

Por último, mas não menos importante, o IcoMoon oferece mais de 5,500 vetores de ícones gratuitos e mais de 4 mil ícones premium. Você também pode criar seu próprio ícone com o IcoMoon e fazer upload do seu próprio arquivo SVG usando uma função de importação.

As Maneiras Mais Rápidas de Usar Ícones WordPress

Você pode usar fontes de ícones no seu site WordPress manualmente copiando o código incorporado ou usando opção alternativas. Tirando a parte de problemas de desempenho, usar plugins e suas funções integradas é a maneira mais rápida e fácil de usar ícones WordPress.

Usar um Plugin de Ícones para WordPress

Usar um plugin é a maneira mais fácil de adicionar uma fontes de ícone ao seu site WordPŕess sem precisar modificar o código.

plugin Font Awesome Integration

Primeiro de tudo, você tem que instalar e ativar o plugin Font Awesome Integration. Depois de terminar o processo, você já pode adicionar fontes de ícones com o shortcode deles – [fawesome]. Vamos ver em detalhes logo abaixo.  

O shortcode contém 4 atributos:

  • target – algo da tag “a”.
  • href – link para usar na tag “a”.
  • iclass – classes para usar na tag /i/.
  • aclass – classes para usar na tag “a”.

Vamos criar um ícone que vai apontar para um site WordPress.

Aqui, vamos ter que colocar o código do ícone – (fa-wordpres) – em uma tag iclass e o link http://wordpress.com/ em uma tag ahref:

[fawesome iclass="fab fa-wordpress" ahref="https://wordpress.com"]

Perceba que, no exemplo, adicionamos o prefixo fab ao iclass. Vamos mostrar alguns estilos de prefixos mais tarde, fornecendo a você uma lista de códigos prontos.  

Aqui é como ele vai aparecer no bloco do shortcode no WordPress.

exemplo de código de ícone inserido no wordpress

Assim que visualizar o resultado ou publicar a postagem, ele vai ficar assim:

resultado do código de ícone adicionado no wordpress

Quando clicar no ícone do WordPress criado, você será redirecionado para o site linkado.

Você também pode ir direto ao diretório de ícones do Font Awesome e verificar o código do ícone WordPress que quer usar. Para isso, clique no ícone, copie e cole o código para a parte pretendida ao conteúdo do seu site.

Vamos usar um ícone do WordPress gratuito disponível no Font Awesome. E posicioná-lo em uma postagem como exemplo.

Primeiro, simplesmente copie o código de ícone WordPress escolhido do Font Awesome:

<i class="fab fa-wordpress"></i>

Então, coloque esse código no editor de posts do WordPress na parte de bloco HTML. Ele vai se parecer com isso:

código html inserido para gerar ícone na página

E aqui está como ele vai ser mostrado quando você pré-visualizar a página ou publicar a postagem.

resultado do ícone gerado pelo código html inserido na página

Fora esse exemplo, você ainda pode personalizar o ícone de acordo com as necessidades do seu projeto. Isso inclui modificar elementos como cor, tamanho, estilo e assim por diante.

Aqui está um exemplo de código de ícone modificado nos quesitos cor e tamanho.

personalizar estio de ícone por código html

A pré-visualização:

resultado da personalização do código html do ícone

Certifique-se que, para referenciar um ícone, usamos o <i> e o <span> para iniciar o comando. Além disso, cada nome de ícone tem um prefixo de estilo.

Aqui está como um comando é feito:

<i class=”style_prefix fa-icon name></i>

Ou,

<span=”style_prefix fa-icon_name></span>

Aqui está uma listagem de códigos dos comandos acima:

EstiloDisponibilidadeEstilo do PrefixoExemplo
SólidoGrátisfas<i class=”fas fa-icon_name”></i><span class=”fas fa-icon_name”></span>
RegularProfar<i class=”far fa-icon_name”></i><span class=”far fa-icon_name”></span>
LeveProfal<i class=”fal fa-icon_name”></i><span class=”far fa-icon_name”></span>
MarcasGrátisfab<i class=”fab fa-icon_name”></i><span class=”far fa-icon_name”></span>

Usar Dashicons para Ícones WordPress

Tirando as fontes de ícones de código aberto disponíveis pela internet, o WordPress tem, na verdade, os DashIcons – um pacote padrão de fontes de ícones WordPress. Ele foi introduzido na versão 3.8 do WordPress.

Os Dashicons oferecem muitas possibilidades de fontes para ícones. Algumas delas são: menus, tela de abertura, formatos de postagem, mídia, imagem, edição, tela de postagens, organização, produtos, taxonomias, widgets, notificações e muito mais.

Esses ícones podem ser usados para personalizar seus próprios plugins , temas, ícones de tipos de postagens e outros elementos no seu site. Como ele já é quipado no seu WordPress, ele é bem fácil de usar.

Você pode fazer isso adicionando um código ao arquivo functions.php, o que leva um pouco de tempo para ser feito manualmente.

Ao invés disso, você pode automatizar as coisas usando um plugin como o Code Snippets para configurar seus Dashicons sem precisar mexer no arquivo functions.php.   

plugin Code Snippets

Com isso, você pode ir diretamente ao site Dashicons e escolher o ícone WordPress que quer usar. Para integrá-lo ao seu site, você só precisa clicar no link “Copy HTML” e pegar o código. Copie e cole o código no seu WordPress.

Por exemplo, vamos pegar os ícones dashicons-tickets do diretório do Dashicons e adicioná-lo em uma postagem do WordPress. Copie o coloque o código HTML no bloco de HTML. O resultado será algo do tipo:

inserir código html de ícone

Assim que clicar em pré-visualizar, você vai conseguir ver o ícone posicionado:

resultado de código html inserido na página

Para customizar Dashicons, você pode usar CSS.

Conclusão

Como você pode ver fontes de ícones podem ser uma ótima alternativa para substituir imagens usadas como icones, pictogramas ou símbolos no seu site.

Fontes de ícones são essenciais para sites responsivos, pois reduzem o tempo de carregamento das páginas em virtude dos seus tamanhos menores.

Algumas das indicações de sites que você pode pode encontrar fontes de ícones WordPress são:

  1. IcoFont;
  2. Font Awesome;
  3. We Love Icon Fonts;
  4. IcoMoon.

E, ao invés de adicionar ícones manualmente, existem duas maneiras de fazer isso de forma prática e fácil:

  1. Usar o plugin Font Awesome Integration.
  2. Combinar o uso do WordPress Dashicons com o plugin Code Snippet.

Tudo o que você precisa fazer é copiar e colar o código HTML dos ícones que quer usar em uma área específica do seu site.

Até o próximo tutorial!

Author
O autor

Andrei L.

Jornalista e conteudista SEO/Localização na Hostinger Brasil. Tem experiência em WordPress e na produção de conteúdos de tecnologia otimizados para conquistar as melhores posições no Google. É fã de games, adora vôlei, ama o inverno e está sempre buscando se aperfeiçoar no Inglês.