Como adicionar facilmente fontes de ícones em seu tema do WordPress

As fontes de ícones são uma das ferramentas mais eficazes em nosso kit de ferramentas de design do WordPress e também podem ser as suas.

Eles são mais do que apenas um colírio para os olhos – são redimensionáveis, carregam rapidamente como fontes da Web e não deixam seu site lento como os ícones de imagem tradicionais. Além disso, você pode estilizá-los usando CSS para obter exatamente a aparência que deseja.

Descobrimos dois métodos confiáveis para adicionar fontes de ícones ao WordPress, e este artigo mostrará como fazer isso.

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

As fontes de ícones contêm símbolos ou pequenas imagens em vez de letras e números.

Você pode usar essas fontes de ícones de várias maneiras diferentes. Por exemplo, você pode usá-las em seu carrinho de compras, botões de download, caixas de recursos, concursos de brindes e até mesmo nos menus de navegação do WordPress.

De fato, o WordPress usa ícones de fonte em sua área de administração.

A maioria dos visitantes entenderá imediatamente o significado de um ícone comumente usado, o que facilita a navegação no seu site. Eles também podem ajudá-lo a criar um site multilíngue, pois a maioria das pessoas entenderá as fontes de ícones comuns, independentemente do idioma que falam.

Em comparação com os ícones baseados em imagens, os ícones de fonte carregam muito mais rapidamente e, portanto, podem aumentar a velocidade e o desempenho do WordPress.

Há vários conjuntos de fontes de ícones de código aberto que você pode usar gratuitamente, mas, neste guia, usaremos o Font Awesome por ser o conjunto de ícones de código aberto mais popular.

Dito isso, vamos ver como você pode adicionar facilmente fontes de ícones ao seu tema do WordPress. Basta usar os links rápidos para ir direto ao método que você deseja usar:

Método 1. Adição de fontes de ícones usando um plug-in do WordPress (gratuito e fácil)

A maneira mais fácil de adicionar fontes de ícones personalizados ao WordPress é usar o plug-in Font Awesome.

Esse plug-in permite que você use fontes de ícones gratuitas em suas páginas e postagens sem modificar os arquivos do tema do WordPress. Você também receberá automaticamente todos os novos ícones do Font Awesome sempre que atualizar o plug-in.

A primeira coisa que você precisa fazer é adicionar o Font Awesome ao WordPress. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você pode adicionar um ícone da Font Awesome a qualquer bloco de shortcode. Basta abrir a página ou o post em que você deseja exibir a fonte do ícone e clicar no ícone “+”.

Agora você pode pesquisar por “Shortcode” e selecionar o bloco certo quando ele aparecer.

Com isso feito, você pode adicionar qualquer ícone do Font Awesome usando o seguinte shortcode:

[icon name="rocket"]

Basta substituir “rocket” pelo nome do ícone que você deseja exibir. Para obter o nome, vá até a biblioteca do Font Awesome e clique no ícone que você deseja usar.

Na janela pop-up que aparece, clique no ícone.

O Font Awesome copiará automaticamente o nome para sua área de transferência.

Feito isso, basta colar o nome no shortcode. Agora você pode clicar em “Publish” (Publicar) ou “Update” (Atualizar) para ativar a fonte do ícone.

Às vezes, você pode querer mostrar uma fonte de ícone dentro de um bloco de texto. Por exemplo, talvez você precise exibir um símbolo de “copyright” após o nome de uma marca.

Para fazer isso, basta colar o shortcode em qualquer bloco de parágrafo.

Em seguida, você pode usar as configurações no menu à direita para personalizar o ícone, da mesma forma que personaliza as opções para blocos de texto. Por exemplo, você pode alterar a cor do texto, o tamanho da fonte e a cor do plano de fundo no WordPress.

O WordPress transformará o shortcode em um ícone Font Awesome e o exibirá ao lado do seu texto.

Outra opção é adicionar o shortcode a qualquer área pronta para widgets.

Por exemplo, você pode adicionar um bloco de Shortcode à barra lateral do seu site ou a uma seção semelhante.

Para obter mais informações, consulte nosso guia sobre como usar códigos de acesso nos widgets da barra lateral do WordPress.

Você pode até mesmo adicionar o shortcode do ícone às colunas e criar belas caixas de recursos.

Para obter instruções detalhadas, consulte nosso guia sobre como adicionar caixas de recursos com ícones no WordPress.

Muitos sites usam fontes de ícones em seus menus para ajudar os visitantes a se orientarem. Para adicionar um ícone, crie um novo menu ou abra um menu existente no painel do WordPress.

Para obter instruções passo a passo, confira nosso guia para iniciantes sobre como adicionar um menu de navegação no WordPress.

Na página Appearance “ Menus , clique em “Opções de tela” e marque a caixa ao lado de “Classes CSS”.

Feito isso, basta clicar para expandir o item de menu no qual você deseja exibir o ícone.

Agora você deve ver um novo campo “CSS Classes”.

Para obter a classe CSS de um ícone, basta localizar a fonte do ícone no site do Font Awesome e clicar nela. Se desejar, você pode alterar o estilo do ícone clicando nas diferentes configurações.

Na janela pop-up, você verá um trecho de código HTML. A classe CSS é simplesmente o texto entre as aspas. Por exemplo, na imagem a seguir, a classe CSS é fa-solid fa-address-book.

Basta copiar o texto dentro das aspas e, em seguida, voltar para o painel do WordPress.

Agora você pode colar o texto no campo “CSS Classes”.

Para adicionar mais fontes de ícones, basta seguir o mesmo processo descrito acima.

Quando estiver satisfeito com a configuração do menu, clique em “Salvar”. Agora, se você visitar o site do WordPress, verá o menu de navegação atualizado.

Método 2. Uso de fontes de ícones com o SeedProd (mais personalizável)

Se quiser ter a liberdade de usar ícones de fontes em qualquer lugar do site, recomendamos o uso de um plug-in do construtor de páginas.

O SeedProd é o melhor construtor de páginas WordPress de arrastar e sol tar do mercado e tem mais de 1.400 ícones Font Awesome incorporados. Ele também tem um bloco de ícones pronto que você pode adicionar a qualquer página usando o recurso de arrastar e soltar.

Com o SeedProd, você também pode criar um tema WordPress personalizado que se adapte ao design de seu site desejado.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in. Para obter mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação, vá para SeedProd ” Settings e insira sua chave de licença.

Você pode encontrar essas informações em sua conta no site da SeedProd. Depois de inserir a chave de licença, clique no botão “Verify Key” (Verificar chave).

Em seguida, você precisa acessar SeedProd ” Pages e clicar no botão “Add New Landing Page” (Adicionar nova página de destino).

Agora, você pode escolher um modelo para usar como base para sua página. O SeedProd tem mais de 350 modelos criados profissionalmente que você pode personalizar de acordo com as necessidades do seu blog ou site do WordPress.

Por exemplo, você pode criar uma página de aterrissagem de lista de espera viral, uma página de aperto ou até mesmo uma página de erro 404 personalizada para manter os usuários envolvidos.

Para selecionar um modelo, passe o mouse sobre ele e clique no ícone “Marca de verificação”.

Estamos usando o modelo “Ebook Sales Page” em todas as nossas imagens, pois ele é perfeito para a venda de produtos digitais. No entanto, você pode usar qualquer design que desejar.

Em seguida, digite um nome para a página personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser.

Quando estiver satisfeito com as informações inseridas, clique no botão “Save and Start Editing the Page” (Salvar e começar a editar a página).

Em seguida, você será levado ao construtor de páginas de arrastar e soltar do SeedProd, onde poderá personalizar o modelo.

O editor do SeedProd mostra uma visualização ao vivo de seu design à direita e algumas configurações de bloco à esquerda.

O menu do lado esquerdo também tem blocos que você pode arrastar para o seu design.

Você pode arrastar e soltar blocos padrão, como botões e imagens, ou usar blocos avançados, como o formulário de contato, contagem regressiva, botões de compartilhamento de mídia social e muito mais.

Para personalizar qualquer bloco, basta clicar para selecioná-lo em seu layout.

O menu à esquerda agora mostrará todas as configurações que você pode usar para personalizar esse bloco. Por exemplo, muitas vezes você pode alterar as cores do plano de fundo, adicionar imagens de plano de fundo ou alterar o esquema de cores e as fontes para que correspondam melhor à sua marca.

Para adicionar uma fonte de ícone à página, basta localizar o bloco “Ícone” na coluna da esquerda e arrastá-lo para o layout.

O SeedProd mostrará um ícone de “seta” por padrão.

Para mostrar um ícone diferente da Font Awesome, basta clicar para selecionar o bloco Icon.

No menu do lado esquerdo, passe o mouse sobre o ícone e clique no botão “Icon Library” quando ele aparecer.

Agora você verá todos os diferentes ícones do Font Awesome que pode escolher.

Basta localizar o ícone da fonte que você deseja usar e clicar nele.

O SeedProd agora adicionará o ícone ao seu layout.

Depois de escolher um ícone, você pode alterar seu alinhamento, cor e tamanho usando as configurações no menu à esquerda.

Você também pode adicionar um link ao ícone da fonte, digitando-o no campo “Link” no menu à esquerda.

Outra opção é usar a Icon Box pronta do SeedProd.

Isso permite que você digite algum texto e, em seguida, mostre um ícone de fonte ao lado dele, o que o torna uma ótima opção para caixas de recursos.

Basta localizar a Icon Box no menu do lado esquerdo e arrastá-la para o layout.

Em seguida, você pode clicar para selecionar o bloco e alterar o ícone seguindo o mesmo processo descrito acima.

Depois disso, você pode digitar o texto do cabeçalho e do corpo.

Você também pode alterar o preenchimento e a margem do bloco, adicionar animações CSS e muito mais, selecionando a guia “Advanced” (Avançado).

Você pode continuar trabalhando na página adicionando mais blocos e personalizando esses blocos no menu do lado esquerdo.

Quando você estiver satisfeito com a aparência da página, clique no botão “Save” (Salvar). Em seguida, você pode selecionar “Publish” (Publicar) para tornar a página ativa.

Alternativa: Usar ícones SVG

Outra maneira de adicionar imagens de ícones ao WordPress é usar ícones SVG. Abreviação de scalable vector format (formato vetorial escalável), é um formato de imagem comumente usado para gráficos vetoriais.

Muitas pessoas usam ícones vetoriais SVG em vez de fontes de ícones quando querem adicionar várias cores aos seus ícones. Esses arquivos também são conhecidos por serem mais compatíveis com SEO e exigem menos solicitações do servidor para carregar do que outros ícones de imagem.

Se quiser saber mais sobre SVG, consulte nosso guia passo a passo sobre como adicionar arquivos de imagem SVG no WordPress.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar fontes de ícones ao seu tema do WordPress. Você também pode consultar nosso guia sobre os melhores criadores de temas do WordPress e como alterar as fontes em seu tema do WordPress.

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