Como adicionar fontes de ícones no WordPress

As fontes de ícone são símbolos, em vez de letras, que permitem adicionar ícones vetoriais ao seu site sem diminuí-lo, pois você não usaria arquivos gráficos grandes, mas sim arquivos de fontes. Quer sejam letras ou ícones, as fontes são em si mesmas gráficas e têm mais utilizações do que apenas texto. Neste artigo, discutiremos como adicionar fontes de ícone ao seu site WordPress. Mas primeiro, vamos dar uma olhada nas situações em que você pode querer usá-los.

Quando posso usar minhas fontes de ícones?

A vantagem óbvia das fontes de ícone sobre os ícones convencionais baseados em imagens é a velocidade: um símbolo de fonte, sendo um gráfico vetorial, carregue o mesmo independente do tamanho cada ícone ocupa na tela. Os gráficos não vetoriais perdem qualidade quando aumentados e desfocados. Eles também são muito difíceis de manipular e podem exigir que você use editores de imagem para criar várias versões de cada gráfico e, em seguida, mexer nas configurações do seu site até ter certeza de que cada dispositivo que seu visitante pode estar usando exibe a versão ideal. gráfico.

Em contraste, fontes (incluindo fontes de ícones) facilmente escalável sem perda de qualidade, eles são literalmente feito para ser estilizado com cores e tons, se necessário, e são geralmente leveespecialmente em comparação com outros gráficos.

Uma fonte de ícone normalmente contém símbolos comumente usados para várias funcionalidades online, como pastas, bolhas de bate-papo, setas, pastas, alfinetes e semelhantes. Eles são freqüentemente encontrados em menus de navegação, mas você pode usá-los em qualquer lugar onde usaria uma imagem para indicar uma função comum. Também possivelmente economize tempo e dinheiro no design de ícones – afinal, tudo que você precisa é de uma fonte completa.

Existem muitas fontes de ícones para escolher, mas nossas favoritas são Fonte incrível e Fonte elegante. Para os fins desta demonstração, usaremos principalmente o Font Awesome. Isso é o que iremos cobrir:

  • Como adicionar fontes de ícone no WordPress usando um plugin
  • Como adicionar fontes de ícone no WordPress usando Elementor
  • Como adicionar fontes de ícone no WordPress usando código
  • Como adicionar ícones de fonte incríveis diretamente

Como adicionar fontes de ícone no WordPress usando um plugin

Se você é um usuário iniciante do WordPress e não se sente confortável em adicionar novas fontes ao seu tema, modificando os arquivos do tema, o que é completamente compreensível, então um plugin é provavelmente uma boa opção para você. O plugin que usaremos é Melhor fonte incrível(better font awesome). Você precisa instalá-lo e ativá-lo na seção de plug-ins do painel do WordPress.

E é isso, seu site agora terá suporte para Font Awesome.

Mas para usar os próprios ícones, você precisa de outra coisa: um código curto. Um shortcode é um trecho de código com uma função simples. Neste caso, está exibindo um ícone. Para usar os ícones Font Awesome, você primeiro precisa saber como são chamados e como são. Você pode fazer isso facilmente usando este folha de dicas fornecido pelos desenvolvedores de origem.

Em seguida, para adicionar seus códigos de acesso de fonte ao seu site, simplesmente adicionar um bloco de shortcode se você usar o editor de blocos de Gutenberg, um elemento de shortcode se você usar Elementor, ou apenas escreva o shortcode onde você precisa se você usa o editor clássico (certificando-se de que você mudou para o modo de edição de texto). Mostraremos como fazer isso com Gutenberg. Adicionaremos o código curto em uma postagem, mas ele funciona da mesma forma para qualquer área do seu site que possa aceitar um código curto.

Ao clicar no mais assinar, você obtém o menu de bloco. Encontre um bloco de shortcode e cole o shortcode desejado. Você pode encontrar o nome de um ícone na folha de dicas e adicioná-lo ao shortcode: [icon name=”iconname”]

Adicionar código de bloqueio
Ícone de código curto

Você também pode use esses códigos de acesso dentro de blocos de texto, algo como balas. Por exemplo, vamos introduzir o parágrafo final com outro ícone, usando o código curto [icon name=”arrow-circle-right”].

Código curto

E seus ícones ficarão visíveis como parte do texto em sua página.

Antevisão do ícone

Outra característica deste plugin é que ele se atualiza automaticamente: se houver uma nova versão do Font Awesome, você não ficará para trás! Para obter mais informações sobre como atualizar plug-ins, você pode consultar nosso tutorial passo a passo prático.

Como adicionar fontes de ícone no WordPress usando Elementor

Elementor, um editor visual popular, permite que você use fontes de ícones facilmente. Na verdade, o Elementor já vem com o Font Awesome integrado. Para adicionar um ícone usando o Elementor, comece a editar uma postagem no Elementor e pesquise pelo Ícone item no menu do lado esquerdo e arraste-o para onde quiser.

Elemento ou ícone de shortcode

Agora temos o ícone padrão, o espaço reservado. Para selecionar outro ícone, basta clicar na imagem do ícone no lado esquerdo enquanto seu elemento de ícone é selecionado. Você pode ver que tem uma borda azul ao redor.

Configurações de atalho do ícone do Elementor

Selecione o ícone de sua preferência e clique em inserir para inseri-lo no lugar do espaço reservado. Selecionamos um ícone de sino do Fonte incrível – regular conjunto de ícones.

Ícones impressionantes de fontes Elementor

Na mesma guia, você pode adicionar um link ou alterar o alinhamento do ícone, como fizemos.

Elemento ou posição do ícone

Você pode mudar sua cor no Estilo guia enquanto seu ícone é selecionado.

Cor do ícone do Elementor

E agora você sabe como usar ícones no Elementor. Existem muitas outras opções para o estilo e funcionalidade de seus ícones no Elementor, mas agora você conhece o básico.

Como adicionar fontes de ícone no WordPress usando código

Fonte incrível

Você precisará fornecer ao Font Awesome seu endereço de e-mail e clicar em Enviar código do kit.

Font Awesome Email

Em seguida, você precisa verificar seu endereço de e-mail e configurar sua conta. Basta seguir as instruções na tela até chegar à tela que contém o seu código. Dar um click Copie o código do kit para copiá-lo.

Font Awesome Copy Kit Code

Finalmente, você precisa copiar este código para o header.php arquivo. Você pode encontrá-lo navegando para Editor de aparência / tema no painel do WordPress. Ele estará no menu da extrema direita.

Editor de tema

Basta colar o código do kit que você copiou logo abaixo do rótulo e estará pronto.

Código de edição do cabeçalho

Como adicionar ícones incríveis de fontes individuais

Por fim, você também pode adicionar ícones Font Awesome ao seu site WordPress individualmente, diretamente da biblioteca do desenvolvedor. Você não precisa de um plugin ou qualquer outra coisa para fazer isso, você pode apenas usar um ícone de sua preferência. Para fazer isso, basta ir para Galeria de ícones incríveis de fontes e encontre um ícone de que goste.

Ícone de pesquisa

Clique nele e você encontrará o código de que precisa para incorporá-lo.

Ícone HTML

Para adicionar seu ícone, você precisa adicioná-lo usando um código. Para o editor clássico, funciona simplesmente colando o código onde você quiser, usando o modo Texto. Em Gutenberg, usamos o HTML personalizado bloquear. No Elementor, você precisará do HTML personalizado elemento, mas o princípio é o mesmo. Basta colar o código obtido da biblioteca de ícones.

Bloco HTML

E o seu ícone estará exatamente onde você o colocar!

Antevisão final

Em conclusão

Como mostramos, é muito fácil instalar um pacote de fontes de ícones no WordPress. E não só: contribui favoravelmente para a capacidade de resposta e velocidade de carregamento do seu site, tornando-os uma ótima opção se você está atendendo aos usuários que acessam seus serviços em dispositivos móveis ou com uma conexão mais lenta., Mas também melhor em termos de experiência do usuário. Leve, fácil de estilizar e rápido de carregar – o que há para não gostar nisso?

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: