Como Usar Fontes de Ícones no Editor de Posts do WordPress (Sem Código)

Você quer usar fontes de ícones no editor de posts do WordPress?

Fontes de ícones permitem que você use facilmente imagens e símbolos em textos. Elas são leves e não deixarão seu site lento, além de poderem ser facilmente escaladas para qualquer tamanho e estilizadas como qualquer outra fonte de texto.

Neste artigo, mostraremos como usar facilmente fontes de ícones no editor de posts do WordPress sem escrever nenhum código HTML.

Mostraremos vários métodos, cada um usando uma abordagem ligeiramente diferente. Você pode escolher o que funciona melhor para você.

Método 1. Adicionando Fontes de Ícones no Editor de Posts do WordPress usando JVM Rich Text Icons

Este método é recomendado para usar em qualquer tipo de site WordPress. É fácil de usar e funciona perfeitamente com o editor de blocos.

Primeiro, você precisa instalar e ativar o plugin JVM Rich Text Icons. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você pode simplesmente editar uma postagem ou página do WordPress ou criar uma nova. Dentro do editor de postagens, adicione um novo bloco de parágrafo e você verá um novo ícone de bandeira na barra de ferramentas do bloco.

Clicar nele mostrará um pop-up de ícones para escolher. Ele usa as populares fontes de ícones Font Awesome por padrão.

Você pode usar a pesquisa para procurar um ícone ou simplesmente rolar para baixo para encontrar o ícone desejado e, em seguida, clicar para adicioná-lo.

Uma vantagem de usar fontes de ícones é que você pode usar CSS para estilizar.

No entanto, como você já está usando o editor de blocos, pode simplesmente usar as ferramentas de cor integradas para estilizar os ícones.

O plugin permite que você use fontes de ícones na maioria dos blocos de texto, como Parágrafo, Lista, Botão, Colunas, Capa e muito mais.

Aqui está um exemplo de uso de fontes de ícones e opções de bloco para estilizar três colunas.

Outro exemplo útil de uso de fontes de ícones é com botões.

Desta vez, estamos usando fontes de ícones inline ao lado de algum texto para os dois botões.

Sinta-se à vontade para usar as ferramentas do editor de blocos, como alinhamento de texto, cores, espaçamento e muito mais, para aproveitar ao máximo as fontes de ícones.

Método 2. Adicionar fontes de ícones no editor de postagens do WordPress com Font Awesome

Este método requer que você adicione shortcodes no editor de postagens para exibir fontes de ícones. Você pode usar este método se não precisar usar fontes de ícones regularmente em suas postagens e páginas do WordPress.

Primeiro, você precisa instalar e ativar o plugin Font Awesome. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você pode editar uma postagem ou página no WordPress e usar o seguinte shortcode para adicionar um ícone de fonte.

[icon name="home"]

O parâmetro name aqui é o nome da fonte usada pelo Font Awesome. Você pode encontrar a lista completa na página Font Awesome cheatsheet.

Uma vez adicionado, você pode pré-visualizar sua postagem ou página para ver como o ícone ficará no site ativo, pois ele não será exibido como um ícone no editor de blocos.

É assim que ficou em nosso site de teste.

Você pode usar o shortcode dentro de um parágrafo e em linha com outro texto. Você também pode adicioná-lo sozinho usando o bloco 'Shortcode'.

No entanto, usar o bloco 'Shortcode' não lhe dará as opções de estilo que você obterá com outros blocos de texto.

Você também pode adicionar o shortcode dentro de colunas para criar uma linha de recursos.

Seria um pouco mais complicado, pois você não conseguiria ver as imagens reais, e as alturas das colunas continuariam mudando dentro do editor.

Veja como ficou em nosso site de teste. As colunas têm a mesma altura, embora não estejam no editor.

Provavelmente você terá que pré-visualizar seu trabalho em uma nova aba do navegador várias vezes para ver como ele ficará para os usuários.

Método 3. Usando Fontes de Ícones com Page Builders do WordPress

Este método é ótimo se você estiver criando uma landing page ou projetando seu site usando um page builder do WordPress como o SeedProd.

SeedProd é o melhor page builder do WordPress do mercado. Ele permite que você crie facilmente landing pages incríveis ou crie um tema de site completo.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você será solicitado a inserir sua chave de licença do plugin. Você pode encontrar essas informações em sua conta no site do SeedProd.

Após inserir sua chave de licença e clicar em ‘Verificar Chave’, você pode começar a trabalhar em sua landing page.

Simplesmente vá para a página SeedProd » Landing Pages e clique no botão ‘Adicionar Nova Landing Page’.

Depois disso, você será solicitado a escolher um modelo para sua landing page.

O SeedProd vem com um monte de belos designs de landing page que você pode usar como ponto de partida, ou você pode começar com um modelo em branco e projetar tudo sozinho.

Para este tutorial, usaremos um modelo pré-projetado. Simplesmente clique em um modelo para selecioná-lo e continuar.

Em seguida, você será solicitado a fornecer um título para sua landing page e escolher uma URL.

Após inseri-los, clique no botão ‘Salvar e Começar a Editar a Página’ para continuar.

O SeedProd agora iniciará a interface do construtor de páginas. É uma ferramenta de design de arrastar e soltar onde você pode simplesmente apontar e clicar em qualquer item para editá-lo.

Você também pode arrastar e soltar blocos da coluna esquerda para adicionar novos elementos ao seu design.

Para fins deste tutorial, vamos adicionar o bloco de Ícone.

Após adicionar o bloco, você pode simplesmente clicar para editar suas propriedades.

A coluna esquerda mudará para mostrar as opções para o bloco de Ícone. Você pode clicar na seção ‘Ícone’ à esquerda e escolher uma imagem de ícone diferente ou alterar a cor e o estilo.

Outra maneira de usar ícones no SeedProd é adicionando o bloco ‘Caixa de Ícone’.

A diferença entre este e o bloco ‘Ícone’ que usamos anteriormente é que ‘Caixa de Ícone’ permite que você adicione texto junto com seu ícone escolhido.

Esta é uma das maneiras mais comuns de usar ícones ao exibir recursos de produtos, serviços e outros itens.

Você pode colocar sua caixa de ícone dentro de colunas, escolher cores e ajustar o tamanho do ícone ao seu gosto.

Além disso, você também pode formatar o texto acompanhante usando a barra de ferramentas de formatação do SeedProd.

Assim que terminar de editar sua página, não se esqueça de clicar no botão ‘Salvar’ no canto superior direito da tela.

Se você estiver pronto, pode clicar em ‘Publicar’ para que a página seja publicada, ou pode clicar em ‘Pré-visualizar’ para ter certeza de que ela ficará como você deseja.

Você também pode clicar em ‘Salvar como Modelo’ para poder reutilizar este design com o SeedProd em outras partes do seu site.

Veja como as fontes de ícones ficaram em nosso site de teste.

Esperamos que este artigo tenha ajudado você a aprender como usar fontes de ícones no editor de posts do WordPress sem escrever código HTML. Você também pode querer ver nosso guia de desempenho do WordPress para otimizar a velocidade do seu site ou os melhores plugins de landing page para WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.