As pessoas são naturalmente atraídas pela aparência visual de um site da Web do WordPress, tanto quanto são atraídos pelo conteúdo escrito que você compartilha. Na verdade, segundo Jeff Bullas ", Os artigos com imagens têm 94% mais visualizações do que os artigos sem imagens.

Isso é um grande aumento nas visualizações de página, se você me perguntar.

E qual é a razão exatamente?

Basta adicionar algumas imagens relevantes ao artigo de alta qualidade em todo o seu conteúdo.

Mas e as fotos em seu site da Web que vão além de screenshots e fotografias? E as imagens que não apenas chamam a atenção, mas também servem a uma função útil?

Sim, estou falando sobre ícones. Você sabe, aquelas imagens minúsculas que são encontradas em sites para incentivar o compartilhamento nas redes sociais, para ilustrar as páginas de contato dos proprietários de negócios, para citar alguns dos casos de uso.

Como a ideia foi retirada deste site, o visitantes não eram apenas atraídos por imagens em sites, mas estavam inclinados a interagir com eles, as pessoas começaram a adicioná-las a seus sites.

No entanto, com o avanço da tecnologia, como sempre, os ícones de imagem tradicionais começaram a vacilar como uma solução de imagem para sites. Isso porque tornam as páginas muito mais pesadas e, portanto, mais lentas, mas acima de tudo essa solução nem sempre foi adequada para celulares.

Mas existe uma solução: fontes de ícones.

Hoje vou dizer o que são fontes de ícone e os benefícios de usá-los em seu site WordPress. Além disso, vou mostrar como adicionar fontes de ícones ao seu site WordPress usando o popular plugin " Melhor Font impressionante ".

Então, vamos começar.

O que são fontes de ícone e por que você deve usá-las?

As fontes de ícone são exatamente o que dizem: fontes integradas inteiramente em ícones. Na verdade, fontes de ícones ou " tornar-icon "Pode ser descrita como uma fonte que exibe apenas caracteres ou símbolos, não as letras e números aos quais fontes e textos tradicionais estão associados.

As fontes de ícone são usadas para exibir os símbolos mais usados ​​em seu site. Por exemplo, botões de mídia social, seu carrinho, botões de download e botões de navegação são exemplos de ícones que exibem imagens minúsculas e interativas em seu site.

Por que usar fontes de ícones?

Os ícones de imagem funcionaram bem no passado para muitos proprietários de sites. No entanto, à medida que as regras de navegação, a usabilidade e o design evoluíram, as fontes de ícones tornaram-se a melhor solução para exibir imagens interativas em um site.

Aqui está uma olhada em alguns motivos convincentes pelos quais as fontes de ícone são a melhor escolha:

• Expansível facilmente sem perder qualidade
• Customizável em termos de cor e tom
• 100% responsivo
• Funciona como imagens CSS, mas se comporta como texto
• Amigo do usuário
• navegadores compatíveis
• Personalize a opacidade, rotação e muito mais
• Tamanho de arquivo menor
• Não sacrificar a velocidade ou o desempenho do seu site

Como você pode ver, há vários motivos pelos quais você pode querer usar uma fonte de ícone em seu site em vez de um ícone de imagem.

Instalando ícones de fonte em seu site usando um plugin

Better Font Awesome é um WordPress Plugin freeware que permite integrar automaticamente a versão mais recente do Font Awesome em seu projeto WordPress. Além disso, vem com CSS, shortcodes e gerador de shortcode TinyMCE.

Este plugin possui vários recursos úteis para os proprietários de sites:

• Atualização de rotina da versão mais recente
• Capacidade de alternar entre versões do Font Awesome sem alterar códigos curtos
• Suporte para outros plug-ins de fontes populares, incluindo seus códigos de acesso
• Emitido por jsDelivr CDN

1 Etapa: Instalando e Ativando Melhor Fonte Incrível

Para começar, instale e ative o plug-in “Better Font Awesome” por meio do painel do WordPress, como faria com qualquer outro plug-in.

Primeiro, navegue até " Plugins> Adicionar novo E pesquise por " Melhor Font impressionante ".

Depois selecione " instalar agora »E clique em« ativar ".

Uma vez ativado, o plugin adiciona um linkMelhor Font impressionanteNo menu Configurações do seu painel do WordPress.

Etapa 2: Definir configurações de plug-in

Para configurar o plugin « Melhor Font impressionante ", Comece clicando no item do menu" Melhor Font impressionante Em configurações. Depois de fazer isso, você verá uma tela semelhante a esta:

Aqui você pode fazer o seguinte:

• Versão: Selecione a versão de “Better Font Awesome” que deseja usar.
• Usar CSS Minificado: Marque esta caixa se desejar usar a versão reduzida do CSS.
• Exclua a fonte de impressão existente: selecione esta caixa para tentar remover trechos codificados e códigos de acesso adicionados por outros plug-ins e temas.
• Ocultar críticas de administração: Oculte os avisos de administração padrão que aparecem quando ocorrem erros de API e CDN.

Além da quantidade mínima de opções de Better Font Awesome, há uma pequena seção "Uso" que explica como adicionar ícones ao seu site.

Etapa 3: Adicionar ícones ao seu site

Existem três maneiras fáceis de adicionar ícones ao seu site usando “Better Font Awesome” - via shortcode, HTML ou TinyMCE.

# 1. Adicionar ícones usando shortcode

Para adicionar ícones ao seu site usando um código de acesso, primeiro visite o " Font Incríveis Para ver uma lista completa dos ícones disponíveis que podem ser usados.

Aqui você pode pesquisar o ícone que deseja. Por exemplo, se você quiser um ícone de "e-mail", basta pesquisar essa palavra-chave e selecionar o ícone que deseja usar clicando nele.

Após clicar no ícone que deseja adicionar, você verá uma tela mostrando a imagem do ícone com seus diferentes tamanhos e um pequeno bloco de código:

Basta copiar o bloco de código e colá-lo em qualquer lugar do seu site usando a guia "Editor de texto". Esta é a aparência do editor em seu site:

No final, aqui está o que o visitantes verão quando acessarem seu site:

# 2. Adicionar ícones usando código HTML

Como vimos na seção " Usar Você tem a opção de usar código HTML para inserir ícones em seu site. No entanto, os desenvolvedores de plug-ins levam em consideração que o uso de HTML requer prefixos específicos de versão.

É por isso que eles recomendam que você use códigos de acesso. No entanto, se você quiser usar o código HTML, Font Awesome tem informações úteis aqui.

# 3. Adicionar ícones usando TinyMCE

Esta é provavelmente a maneira mais fácil de adicionar ícones ao seu site. No modo "Editor Visual", basta clicar no ícone Inserir. A partir daí, role pelas opções de ícone disponíveis ou restrinja seus resultados usando o recurso de pesquisa.

Depois de encontrar o ícone que deseja, basta clicar nele. O gerador de shortcode insere automaticamente as informações necessárias em sua postagem ou página.

Se você quiser aprender como personalizar os ícones no seu site, consulte os exemplos de " Font Incríveis ".