A maioria dos sites WordPress parecem pouco profissionais quando dependem de arquivos de imagem borrados para ícones de mídias sociais. A melhor solução é adicionar Font Awesome ao WordPress, que oferece ícones nítidos e escaláveis que são atualizados em segundos.
Neste guia, mostrarei passo a passo como configurá-lo para que você possa ter ícones nítidos e profissionais em seu site sem a frustração usual.
Passos rápidos para adicionar Ícones Font Awesome personalizáveis ao WordPress:
O que é Font Awesome e Por Que Usá-lo?
Font Awesome é uma enorme biblioteca de ícones com milhares de designs prontos para uso, desde logotipos de mídias sociais até setas e ícones de navegação. Em vez de fazer upload de arquivos de imagem pesados, você pode inserir um ícone nítido e escalável que sempre fica bom.
A biblioteca tem mais de 7.000 ícones e, como são baseados em vetores, eles redimensionam sem perder qualidade. Isso os torna rápidos para carregar, leves e perfeitos para manter seu site WordPress ágil.
Eles também funcionam em todos os navegadores e dispositivos modernos, para que seu site tenha uma aparência consistente em todos os lugares. Além disso, você pode ajustar facilmente a cor, o tamanho e o estilo para combinar com o design da sua marca.
Em seguida, vamos ver como adicionar Font Awesome ao seu tema WordPress.
Método Personalizável: Adicionando Font Awesome com SeedProd
Usaremos o SeedProd para o primeiro método porque ele oferece mais liberdade sobre onde você pode usar ícones de fonte em seu site.
SeedProd é o melhor construtor de páginas WordPress de arrastar e soltar do mercado. Ele não só tem mais de 1400 ícones Font Awesome integrados, mas também vem com uma caixa de ícones que você pode adicionar a qualquer página sem escrever código HTML ou classes CSS.
Com o SeedProd, você pode criar temas WordPress personalizados, páginas de destino, cabeçalhos, rodapés ou barras laterais e usar ícones Font Awesome em qualquer lugar nesses layouts com arrastar e soltar.
Siga os passos fáceis abaixo para adicionar fontes de ícones ao WordPress com SeedProd.
Passo 1. Instale e Ative o SeedProd
A primeira coisa que você precisará fazer é instalar e ativar o SeedProd em seu site WordPress. Embora exista uma versão gratuita do SeedProd, usaremos a versão pro para este guia porque ela inclui o recurso de caixa de ícones.
Para mais detalhes, você pode ver este guia para iniciantes sobre como instalar um plugin do WordPress.
Após instalar o plugin, vá para SeedProd » Configurações e insira sua chave de licença do plugin.
Você pode encontrar sua chave de licença em sua conta no site SeedProd na seção Downloads.
Após colar sua chave de licença, clique no botão Verificar Chave.
Em seguida, visite SeedProd » Páginas no seu painel do WordPress e clique no botão Adicionar Nova Página de Destino.
Passo 2. Escolha um Modelo Pré-fabricado
Na próxima tela, você pode escolher um modelo para usar como ponto de partida para sua página. Com mais de 180 modelos projetados profissionalmente, você pode personalizar qualquer design para atender às necessidades do seu site.
Dica profissional: Você também pode usar o recurso de construtor de temas do SeedProd para criar um tema WordPress personalizado do zero usando a mesma funcionalidade de construtor de páginas.
Para escolher um modelo, passe o mouse sobre a miniatura e clique no ícone de ‘Checkmark’.
Para este tutorial, usaremos o modelo de Página de Vendas de eBook, no entanto, você pode usar qualquer design que desejar.
Após escolher seu modelo, você pode dar um nome à sua página. O plugin gerará automaticamente um URL com base no título que você inserir, mas você pode alterá-lo a qualquer momento na Página de Configurações.
Quando estiver satisfeito com o nome e o URL da sua página, clique no botão Salvar e Começar a Editar a Página.
Após clicar no botão, você será direcionado para o construtor de páginas do SeedProd, onde poderá personalizar seu design.
Passo 3. Adicionar Ícones Font Awesome
O editor de arrastar e soltar do SeedProd exibirá uma visualização ao vivo da sua página à direita e vários blocos e configurações à esquerda.
No menu do lado esquerdo, você pode arrastar novos blocos de conteúdo para o seu design, como contadores regressivos, botões de compartilhamento social, formulários de contato e muito mais.
Para personalizar um bloco que seu modelo já está usando, clique nele e você verá suas configurações de personalização na barra lateral esquerda.
Por exemplo, você pode alterar o conteúdo e as cores de um bloco, adicionar imagens de fundo ou alterar o esquema de cores e as fontes para combinar melhor com sua marca.
Para adicionar fontes de ícones do Font Awesome à sua página, localize o bloco ‘Ícone’ na coluna da esquerda e arraste-o para o seu design.
Você verá um ícone de ‘Seta’ por padrão, mas pode clicar nele para trocá-lo por um ícone do Font Awesome melhor que atenda às suas necessidades.
Com o bloco de ícone selecionado, vá para o painel de configurações, passe o mouse sobre o botão ‘Biblioteca de Ícones’ e clique nele.
Agora você verá uma biblioteca de diferentes ícones do Font Awesome que você pode usar. Simplesmente role a biblioteca ou digite o nome de um ícone específico na caixa de pesquisa para encontrar o ícone de fonte que você precisa.
A partir daí, clique nele e o SeedProd o adicionará ao seu layout.
Após selecionar um ícone, você pode personalizar a cor, o tamanho, o alinhamento e o link do ícone.
Alternativamente, você pode usar a Caixa de Ícones do SeedProd para adicionar ícones de fonte com um título e descrição. Você pode personalizar o bloco da mesma forma que o bloco de Ícone, mas também incluir informações extras para seus visitantes.
Continue trabalhando em sua página até ficar satisfeito com a aparência de tudo.
Aqui estão outras maneiras de usar o SeedProd para adicionar fontes de ícones ao seu tema WordPress:
Use o bloco de Perfis Sociais para adicionar ícones personalizados de mídia social ao seu site.
Personalize seu cabeçalho e use o bloco de Carrinho do Menu para adicionar um item de menu de carrinho de compras à sua loja online.
Etapa 4. Publique Suas Alterações
Quando estiver satisfeito com sua página, clique no botão Salvar do construtor de páginas e, em seguida, selecione ‘Publicar’ para tornar sua página ativa em seu site WordPress.
FAQs sobre como Adicionar Font Awesome ao WordPress
Método Alternativo: Usando o Plugin Font Awesome
Outra forma de adicionar fontes de ícones ao seu site é com o plugin Font Awesome para WordPress. Com este método, você pode usar fontes de ícones em suas postagens e páginas, mas não terá o mesmo nível de controle e personalização que obtém com o primeiro método.
Dito isso, é uma ótima solução se você quiser usar algo diferente de um plugin de construtor de páginas.
Para começar, baixe a versão mais recente do Font Awesome do repositório de plugins do WordPress e ative-o em seu site.
Após ativar o plugin, você pode criar ou editar qualquer postagem ou página e usar o bloco Shortcode do WordPress para adicionar o shortcode do ícone Font Awesome.
Simplesmente clique no ícone ‘+’ e procure por ‘Shortcode’, em seguida, clique nele quando o bloco aparecer.
Uma vez feito isso, você pode adicionar qualquer ícone copiando e colando o seguinte trecho de shortcode:
[icon name= "rocket"]
Tudo o que você precisa fazer é substituir “rocket” pelo nome do ícone que deseja exibir. Para obter o nome do ícone, visite a CDN do site Font Awesome: fontawesome.com/icons e clique no ícone gratuito que você deseja usar.
A partir daí, copie o nome do ícone para salvá-lo na sua área de transferência.
Agora você pode colar o nome no bloco de shortcode e clicar em Publicar para tornar suas alterações visíveis.
Você agora pode visitar sua postagem para ver o ícone em ação.
FAQs on Adding Font Awesome to WordPress
functions.php or linking to the CDN.[icon name="coffee"], or by pasting HTML such as <i class="fas fa-coffee"></i>. Each method works across modern WordPress editors and can be styled with CSS classes.fa-2x for larger icons or fa-spin for rotation effects.Espero que este guia tenha ajudado você a aprender como adicionar Font Awesome no WordPress de forma rápida e fácil. Antes de ir, você também pode gostar deste guia sobre como editar um menu no WordPress para personalizar seus itens de menu.
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
