Deseja adicionar ícones Font Awesome ao seu site WordPress?
O Font Awesome é um popular kit de ferramentas de fontes de ícones que fornece uma vasta coleção de ícones vetoriais escaláveis que são carregados como fontes da Web. Ao adicionar o Font Awesome ao seu tema do WordPress, você pode aprimorar a aparência e a experiência do usuário e melhorar a velocidade do seu site WordPress.
Neste tutorial, mostraremos como adicionar ícones do Font Awesome ao WordPress, passo a passo.
O que é Font Awesome e por que você deve usá-la?
De acordo com o site da Font Awesome, trata-se da "biblioteca de ícones e kit de ferramentas da Internet usada por milhões de designers, desenvolvedores e criadores de conteúdo". Simplificando, são pequenas imagens que você pode adicionar ao seu site em vez de números ou letras.
A biblioteca do Font Awesome inclui mais de 7.000 ícones que abrangem várias categorias, incluindo ícones de mídia social, setas, ícones de navegação e muito mais.
Uma das melhores coisas sobre a Font Awesome e as fontes de ícones em geral é que elas são escalonáveis, o que significa que você pode redimensioná-las sem perder a qualidade. Como são baseadas em vetores, elas carregam de forma rápida e eficiente, tornando seu site mais rápido.
Além disso, os ícones do Font Awesome são compatíveis com a maioria dos navegadores e dispositivos modernos da Web, garantindo que seu site tenha boa aparência e funcione bem em todas as plataformas.
Além disso, esses ícones são superfáceis de personalizar, permitindo que você altere facilmente a cor, o tamanho e outras propriedades para combinar com o design e a marca do seu site.
Dito isso, vamos ver como você pode adicionar o Font Awesome ao seu tema do WordPress. Você pode usar os links rápidos abaixo para acessar instantaneamente o método desejado.
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. Além de ter mais de 1.400 ícones do Font Awesome incorporados, ele 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 fontes 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. Publicar 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.
Aí está!
Esperamos 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, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
