A maioria dos sites do WordPress parece pouco profissional quando depende de arquivos de imagem borrados para ícones de mídia social. A melhor solução é adicionar o Font Awesome ao WordPress, que fornece ícones nítidos e escaloná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 habitual.
Etapas rápidas para adicionar ícones personalizáveis da Font Awesome ao WordPress:
O que é a Font Awesome e por que usá-la?
O 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 carregar arquivos de imagem complicados, você pode inserir um ícone nítido e escalonável que sempre terá uma boa aparência.
A biblioteca tem mais de 7.000 ícones e, como são baseados em vetores, eles são redimensionados sem perder a qualidade. Isso os torna leves, de carregamento rápido e perfeitos para manter a velocidade do seu site WordPress.
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 que correspondam ao design da sua marca.
A seguir, vamos explicar como adicionar o Font Awesome ao seu tema do WordPress.
Método personalizável: Adicionando Font Awesome com SeedProd
Usaremos o SeedProd para o primeiro método, pois ele oferece mais liberdade sobre onde você pode usar os ícones de fonte em seu site.
O SeedProd é o melhor construtor de páginas de arrastar e soltar para WordPress do mercado. Ele não só tem mais de 1.400 ícones do Font Awesome integrados, como 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 personalizados do WordPress, páginas de destino, cabeçalhos, rodapés ou barras laterais e usar os ícones do Font Awesome em qualquer lugar desses layouts com o recurso de arrastar e soltar.
Siga as etapas simples abaixo para adicionar fontes de ícones ao WordPress com o SeedProd.
Etapa 1. Instalar e ativar o SeedProd
A primeira coisa que você precisa fazer é instalar e ativar o SeedProd em seu site WordPress. Embora exista uma versão gratuita do SeedProd, usaremos a versão profissional neste guia porque ela inclui o recurso de caixa de ícones.
Para obter mais detalhes, consulte este guia para iniciantes sobre como instalar um plug-in do WordPress.
Depois de instalar o plug-in, vá para SeedProd " Settings e insira sua chave de licença do plug-in.
Você pode encontrar a chave de licença na sua conta no site da SeedProd, na seção Downloads.
Depois de colar sua chave de licença, clique no botão Verify Key (Verificar chave ).
Em seguida, acesse SeedProd " Pages em seu administrador do WordPress e clique no botão Add New Landing Page (Adicionar nova página de destino ).
Etapa 2. Escolha um modelo predefinido
Na próxima tela, você pode escolher um modelo para usar como ponto de partida para sua página. Com mais de 180 modelos criados por profissionais, você pode personalizar qualquer design para atender às necessidades do seu site.
Dica profissional: você também pode usar o recurso de criação de temas do SeedProd para criar um tema WordPress personalizado do zero usando a mesma funcionalidade de criação de páginas.
Para escolher um modelo, passe o mouse sobre a miniatura e clique no ícone "Marca de seleção".
Para este tutorial, usaremos o modelo de página de vendas de eBook, mas você pode usar qualquer design que desejar.
Depois de escolher o modelo, você pode dar um nome à sua página. O plug-in gerará automaticamente um URL com base no título inserido, mas você pode alterar isso a qualquer momento na página de configurações.
Quando estiver satisfeito com o nome e o URL da página, clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ).
Depois de clicar no botão, você acessará o construtor de páginas do SeedProd, onde poderá personalizar seu design.
Etapa 3. Adicionar ícones com fonte incrível
O editor de arrastar e soltar do SeedProd exibirá uma visualização ao vivo de 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 cronômetros de contagem regressiva, 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 que correspondam melhor à sua marca.
Para adicionar fontes de ícones do Font Awesome à sua página, localize o bloco "Icon" 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 de Font Awesome melhor que atenda às suas necessidades.
Com o bloco de ícones selecionado, vá para o painel de configurações, passe o mouse sobre o botão "Icon Library" (Biblioteca de ícones) e clique nele.
Agora você verá uma biblioteca de diferentes ícones do Font Awesome que pode usar. Basta percorrer a biblioteca ou digitar o nome de um ícone específico na caixa de pesquisa para encontrar o ícone de fonte de que você precisa.
A partir daí, clique nele, e o SeedProd o adicionará ao seu layout.
Depois de selecionar um ícone, você pode personalizar a cor, o tamanho, o alinhamento e o link do ícone.
Como alternativa, você pode usar o Icon Box do SeedProd para adicionar ícones de fonte com um título e uma descrição. Você pode personalizar o bloco da mesma forma que o bloco de ícones, mas também pode incluir informações adicionais para seus visitantes.
Continue trabalhando em sua página até que esteja satisfeito com a aparência de tudo.
Aqui estão algumas outras maneiras de usar o SeedProd para adicionar fontes de ícones ao seu tema do WordPress:
Use o bloco Social Profiles para adicionar ícones personalizados de mídia social ao seu site.
Personalize seu cabeçalho e use o bloco Menu Cart para adicionar um item de menu de carrinho de compras à sua loja on-line.
Etapa 4. Publique suas alterações
Quando estiver satisfeito com sua página, clique no botão Save (Salvar ) do construtor de páginas e, em seguida, selecione 'Publish' (Publicar) para tornar sua página ativa em seu site do WordPress.
A partir daí, você pode visitar sua nova página para ver como ela ficou.
Método alternativo: Usando o plug-in Font Awesome
Outra maneira de adicionar fontes de ícones ao seu site é com o plug-in Font Awesome para WordPress. Com esse método, você pode usar fontes de ícones em seus posts e páginas, mas não terá o mesmo nível de controle e personalização que o primeiro método.
Dito isso, é uma ótima solução se você quiser usar algo diferente de um plug-in de construtor de páginas.
Para começar, baixe a versão mais recente do Font Awesome do repositório de plug-ins do WordPress e ative-o em seu site.
Depois de ativar o plug-in, você pode criar ou editar qualquer post ou página e usar o bloco Shortcode WordPress para adicionar o shortcode do ícone Font Awesome.
Basta clicar no ícone "+" e procurar por "Shortcode" e, em seguida, clicar nele quando o bloco for exibido.
Depois de fazer isso, você pode adicionar qualquer ícone copiando e colando o seguinte snippet 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 o CDN do site Font Awesome: fontawesome.com/icons e clique no ícone gratuito que deseja usar.
A partir daí, copie o nome do ícone para salvá-lo em sua área de transferência.
Agora, você pode colar o nome no bloco de shortcode e clicar em Publish (Publicar ) para ativar suas alterações.
Agora você pode visitar sua postagem para ver o ícone em ação.
Perguntas frequentes sobre como adicionar o Font Awesome ao WordPress
functions.php ou com links para a CDN.[icon name="coffee"]ou colando HTML, como <i class="fas fa-coffee"></i>. Cada método funciona nos editores modernos do WordPress e pode ser estilizado com classes CSS.fa-2x para ícones maiores ou fa-spin para efeitos de rotação.Espero que este guia tenha ajudado você a aprender como adicionar a 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 pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
