Quando vemos sites WordPress usando arquivos de imagem comuns para seus ícones, não podemos deixar de pensar que eles estão perdendo algo melhor.
Isso porque as fontes de ícones são a escolha mais inteligente – elas carregam mais rápido, ficam mais nítidas em qualquer tela e você pode facilmente alterar seu tamanho ou cor com apenas alguns cliques.
Muitos proprietários de sites ainda usam ícones de imagem antiquados porque não ouviram falar das opções mais fáceis disponíveis. Graças às fontes de ícones modernas, você agora pode adicionar ícones de ótima aparência ao seu site sem desacelerá-lo.
Neste guia, mostraremos as maneiras mais simples de adicionar fontes de ícones ao seu tema WordPress. Testamos esses métodos nós mesmos e eles funcionam muito bem com qualquer tema que você possa estar usando.
O que são Fontes de Ícones e Por Que Você Deveria Usá-las?
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 muitas maneiras diferentes. Por exemplo, você pode usá-las com seu carrinho de compras, botões de download, caixas de recursos, concursos de sorteio e até mesmo menus de navegação do WordPress.
Na verdade, o WordPress usa ícones de fonte em sua área administrativa.
A maioria dos visitantes entenderá imediatamente o que um ícone comumente usado significa, para que eles possam tornar seu site mais fácil de navegar. Eles também podem ajudá-lo a criar um site multilíngue, já que a maioria das pessoas entenderá fontes de ícones comuns, independentemente do idioma que falam.
Comparado a ícones baseados em imagem, ícones de fonte carregam muito mais rapidamente, então eles podem aumentar a velocidade e o desempenho do WordPress.
Existem vários conjuntos de fontes de ícones de código aberto que você pode usar gratuitamente, mas neste guia, usaremos o Font Awesome, pois é o conjunto de ícones de código aberto mais popular.
Dito isso, vamos ver como você pode facilmente adicionar fontes de ícones ao seu tema WordPress. Simplesmente use os links rápidos para pular direto para o método que você deseja usar:
- Método 1. Adicionando Fontes de Ícones Usando um Plugin WordPress (Grátis e Fácil)
- Method 2. Using Icon Fonts with SeedProd (More Customizable)
Método 1. Adicionando Fontes de Ícones Usando um Plugin WordPress (Grátis e Fácil)
A maneira mais fácil de adicionar fontes de ícones personalizadas ao WordPress é usando o plugin Font Awesome.
Este plugin permite que você use fontes de ícones gratuitas em suas páginas e posts sem modificar os arquivos do seu tema WordPress. Você também receberá quaisquer novos ícones do Font Awesome automaticamente toda vez que atualizar o plugin.
A primeira coisa que você precisa fazer é adicionar o Font Awesome ao WordPress. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.
Após a ativação, você pode adicionar um ícone do Font Awesome a qualquer bloco de shortcode. Simplesmente abra a página ou post onde você deseja exibir a fonte do ícone e, em seguida, clique no ícone de '+'.
Agora você pode pesquisar por ‘Shortcode’ e selecionar o bloco correto quando ele aparecer.
Com isso feito, você pode adicionar qualquer ícone do Font Awesome usando o seguinte shortcode:
[icon name="rocket"]
Simplesmente substitua “rocket” pelo nome do ícone que você deseja exibir. Para obter o nome, acesse a biblioteca do Font Awesome e clique no ícone que você deseja usar.
No pop-up que aparecer, clique no ícone.
O Font Awesome agora copiará o nome para a sua área de transferência automaticamente.
Com isso feito, simplesmente cole o nome no shortcode. Agora você pode clicar em ‘Publicar’ ou ‘Atualizar’ para tornar a fonte do ícone ativa.
Às vezes, você pode querer exibir uma fonte de ícone dentro de um bloco de texto. Por exemplo, você pode precisar exibir um símbolo de ‘copyright’ após um nome de marca.
Para fazer isso, basta colar o shortcode dentro de qualquer bloco de Parágrafo.
Você pode então usar as configurações no menu do lado direito para personalizar o ícone, de forma semelhante a como você personaliza opções para blocos de texto. Por exemplo, você pode alterar a cor do texto, tamanho da fonte e cor de fundo no WordPress.
O WordPress transformará o shortcode em um ícone do 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 mais informações, consulte nosso guia sobre como usar shortcodes em seus widgets de barra lateral do WordPress.
Você pode até adicionar o shortcode de ícone a colunas e criar belas caixas de recursos.
Para 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 Aparência » Menus, clique em ‘Opções de Tela’ e, em seguida, marque a caixa ao lado de ‘Classes CSS’.
Com isso feito, basta clicar para expandir o item do menu onde você deseja exibir o ícone.
Agora você deverá ver um novo campo ‘Classes CSS’.
Para obter a classe CSS de um ícone, basta encontrar a fonte de ícones no site Font Awesome e clicar nela. Se desejar, você pode alterar o estilo do ícone clicando nas diferentes configurações.
No 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.
Simplesmente copie o texto dentro das aspas e, em seguida, volte para o painel do WordPress.
Agora você pode colar o texto no campo ‘Classes CSS’.
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 seu site WordPress, verá o menu de navegação atualizado.
Método 2. Usando Fontes de Ícones com SeedProd (Mais Personalizável)
Se você deseja a liberdade de usar ícones de fontes em qualquer lugar do seu site, recomendamos o uso de um plugin de construtor de páginas.
SeedProd é o melhor construtor de páginas WordPress com arrastar e soltar do mercado e possui mais de 1400 ícones do Font Awesome integrados. Ele também tem um bloco de Ícone pronto que você pode adicionar a qualquer página usando arrastar e soltar.
Várias de nossas marcas parceiras criaram seus sites inteiros usando-o e tiveram ótimas experiências. Para mais detalhes, veja nossa análise do SeedProd.
A primeira coisa que você precisa fazer é instalar e ativar o plugin. Para mais detalhes, veja nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Observação: Existe uma versão gratuita do SeedProd, mas usaremos a versão Pro, pois ela vem com o bloco de Ícone.
Após a ativação, acesse SeedProd » Configurações e insira sua chave de licença.
Você pode encontrar essas informações em sua conta no site do SeedProd. Após inserir a chave de licença, clique no botão ‘Verificar Chave’.
Em seguida, você precisa visitar SeedProd » Páginas e clicar no botão ‘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 projetados profissionalmente que você pode personalizar de acordo com as necessidades do seu blog ou site WordPress.
Por exemplo, você pode criar uma página de destino de lista de espera viral, uma página de captura ou até mesmo uma página de erro 404 personalizada para manter os usuários engajados.
Para selecionar um modelo, passe o mouse sobre ele e clique no ícone de ‘Checkmark’.
Estamos usando o modelo ‘Página de Vendas de Ebook’ em todas as nossas imagens, pois é perfeito para vender 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 ‘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 do seu design à direita e algumas configurações de blocos à esquerda.
O menu à esquerda também possui 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 formulário de contato, contagem regressiva, botões de compartilhamento em mídias sociais 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, você pode frequentemente alterar cores de fundo, adicionar imagens de fundo ou alterar o esquema de cores e fontes para combinar melhor com sua marca.
Para adicionar uma fonte de ícone à página, basta encontrar o bloco 'Ícone' na coluna da esquerda e arrastá-lo para o seu layout.
O SeedProd mostrará um ícone de 'seta' por padrão.
Para mostrar um ícone diferente do Font Awesome em vez disso, basta clicar para selecionar o bloco Ícone.
No menu à esquerda, passe o mouse sobre o ícone e clique no botão 'Biblioteca de Ícones' quando ele aparecer.
Agora você verá todos os diferentes ícones do Font Awesome que você pode escolher.
Simplesmente encontre o ícone de fonte que você deseja usar e clique nele.
O SeedProd agora adicionará o ícone ao seu layout.
Após 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 de fonte, digitando no campo 'Link' no menu à esquerda.
Outra opção é usar a Caixa de Ícones 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.
Simplesmente encontre a Caixa de Ícones no menu à esquerda e arraste-a para o seu 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 margem do bloco, adicionar animações CSS e mais, selecionando a aba 'Avançado'.
Você pode continuar trabalhando na página adicionando mais blocos e personalizando esses blocos no menu à esquerda.
Quando estiver satisfeito com a aparência da página, clique no botão ‘Salvar’. Você pode então selecionar ‘Publicar’ para tornar essa página ativa.
Alternativa: Use Ícones SVG
Outra forma de adicionar imagens de ícones ao WordPress é usando í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 amigáveis para SEO e exigem menos requisições ao servidor para carregar do que outros ícones de imagem.
Se você quiser saber mais sobre SVG, pode conferir 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 WordPress. Você também pode conferir nosso guia sobre os melhores construtores de temas WordPress e como alterar fontes no seu tema 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.
Shraddha Patil
Muito útil! Estava procurando por essas soluções. Que bom que encontrei aqui. Obrigado!!
WPBeginner Support
Glad our guide was helpful
Admin
Juan
Olá, muito obrigado por uma ótima explicação.
Mas não entendi algo.
Na função wp_enqueue_style(), o primeiro parâmetro é uma string chamada ‘wpb-fa’. Consultei a documentação e deveria ser o nome da folha de estilos. Mas não entendi. Para que serve esse nome? É obrigatório que seja nomeado assim neste caso? A folha de estilos não se chama “style.css”?
Desculpe pelas perguntas de iniciante.
Obrigado
WPBeginner Support
O wpb-fa é o nome único para o script, essa seção não é para o nome da folha de estilos
Admin
M. Hridoy
Olá,
Isso é ótimo! Obrigado pelo seu post incrível, cheio de recursos e que vale a pena ler. De fato, um post oportuno e útil do qual pude extrair informações valiosas sobre este assunto. Continue nos atualizando com novas sugestões…
WPBeginner Support
Thank you and you’re welcome
Admin
drkumar kumar
bom artigo, obrigado por compartilhar
WPBeginner Support
Thank you, glad you liked our article
Admin
Niranjan G Vala
Olá equipe de suporte para iniciantes em wp, sou um web designer com deficiência visual.
Li todo este artigo, mas ainda preciso de ajuda para integrar os ícones de fonte no meu site.
Quero usar o Font Awesome com meu tema. e já segui os passos fornecidos acima no artigo.
Os ícones estão funcionando em posts e páginas muito bem, mas eu quero usá-los em menus.
É o que fiz com o css.
.shoppingcart::before { font-family: FontAwesome; content: "\f07a"; color: #ffffff; }
Mas ainda assim não funcionou. O que eu fiz de errado?
Por favor, me ajude a sair deste problema.
Eu sempre agradecerei.
Muito obrigado a todos do wp beginners.
WPBeginner Support
Olá Niranjan,
Uma maneira mais fácil de adicionar o Font Awesome é adicionar suas classes CSS a itens de menu individuais. Após enfileirar a folha de estilo da fonte.
Vá para a página Aparência » Menus e clique no botão Opções de Tela. A partir daí, certifique-se de que a caixa de seleção Classes CSS esteja marcada.
Em seguida, clique para expandir um item de menu individual e você notará a opção de adicionar classes CSS. Cada ícone do font-awesome tem sua própria classe CSS, por exemplo, as classes CSS fa fa-lg fa-home serão usadas para o ícone de casa. Você pode encontrá-los todos no site do Font Awesome.
Após adicionar a classe CSS, você pode usar essas classes em seu CSS personalizado para estilizar os ícones.
Admin
Niranjan G Vala
Primeiramente, obrigado a todos no WP Beginners pela sua valiosa resposta. E desculpem o feedback tardio. Infelizmente, não pude responder rapidamente porque o e-mail estava na pasta de spam. Agora funciona bem e consigo usar o Font Awesome nos menus de navegação.
Uma sugestão é que, por favor, mencionem o nível de acessibilidade de plugins/temas ao postarem um artigo. O núcleo do WordPress é totalmente acessível, mas 60% dos plugins e temas não seguem as diretrizes de acessibilidade da web (WCAG 2.0), que é a recomendação do consórcio World Wide Web (w3.org). Ou, por favor, adicionem links de "pular" no seu site para uma melhor acessibilidade. Tornar os sites acessíveis ajudará muito pessoas com deficiência, como eu, a navegar no site com muito mais facilidade. Obrigado.
ripon
Em um site, deve haver um ícone do Font Awesome. Quero torná-lo dinâmico. Quero mudar esse ícone do painel de controle do WordPress. Por exemplo, na seção 'por que nos escolher', deve haver um ícone de design responsivo. Quero mudar isso nas opções do tema do WordPress.
Tobias
Olá, tutorial incrível, obrigado!
Você pode me ajudar?
Eu usei esta linha de código "-o-transform: scale(1);" para dimensionar meus ícones no Opera corretamente, mas não me ajudou. Talvez seja por causa especificamente desses ícones que estou usando –
É possível que haja algo errado com eles? O que você acha? E obrigado pelo seu tutorial!
valldahi
Muito obrigado, Isy. método 1
Nrusingh Pr Acharya
Obrigado por este método. Inseri o FA manualmente porque o 'better' não tem mais suporte com o WP v4.7.
Estou seguindo seus tutoriais desde o primeiro, e estou bastante confiante no WordPress agora. Obrigado.
zeniwo
Um artigo muito informativo, realmente me ajudou a esclarecer minhas dúvidas sobre como adicionar fontes de ícones em temas do WordPress. Blogueiros como você ajudam centenas de blogueiros novos e iniciantes como eu a entender as coisas e seguir em frente. Muito obrigado por este artigo útil.
WPBeginner Support
Glad you found it helpful
Admin
Rhonda
Obrigado! Eu estava tentando entender como usar os ícones de fonte e isso foi direto ao ponto e útil.
WPBeginner Support
Glad you found it helpful
Admin
Kobe
Obrigado por este post. Foi realmente útil. Eu estava usando o plugin Better Fonts Awesome e ele me ajudou muito. Mas então eu precisei formar meu conteúdo em colunas responsivas e comecei a procurar um plugin que me permitisse fazer isso. Acidentalmente, me deparei com o MotoPress Editor. Na verdade, eu não gosto de editores visuais devido à dependência deles, mas ele me salvou, pois pude formar as colunas visualmente e usar Font Awesome Icons, selecionando tamanhos e cores facilmente. Obrigado novamente pelo bom trabalho.