Nas Opções de Tema de alguns dos meus temas você encontrará opções com o nome de "Button1 Icon", "Button2 Icon", "Button3 Icon" e etc.
Essas opções são responsáveis por definir os ícones que se encontram nos botões do menu principal do tema (demonstrados na primeira imagem desse post).
Mas o que fazer quando você quiser modificar ou remover os ícones do menu? Bom, isso é o que eu vou estar mostrando nesse tutorial.
Primeiramente, a utilização desses íncones não é obrigatória, então se você não quiser incluir ícones nos botões do seu menu, basta deixar o campo de texto dessas opções vazio:
Passo 1: Como funcionam os ícones?
Os ícones utilizados em meus temas são formas vetoriais. Basicamente, eles se parecem com imagens, mas se comportam como caracteres: você pode alterar a cor e o tamanho deles sem prejudicar sua qualidade visual. Existem vários kits de ícones desse tipo por aí criados por diferentes desenvolvedores que podem ser instalados e utilizados em literalmente qualquer tema.
Para facilitar na personalização, eu disponibilizo meus temas com alguns kits de ícones já instalados, assim você tem diversas opções para escolher sem precisar mexer diretamente no HTML do tema. Os kits que já vêm instalados nos meus temas atuais são: FontAwesome (versão 5.15.4), LinearIcons e CappuccIcons. Escolhidos por serem os kits mais completos que eu conheço até o momento.
Mas se nenhum desses kits te agradar, você pode, é claro, procurar e instalar outros. O método de instalação para esses kits nem sempre é o mesmo para todos, portanto eu não estarei ensinando como fazer a instalação aqui, mas os sites que disponibilizam esses kits geralmente fornece também um guia/tutorial de como instalá-los no seu código.
Passo 2: Onde encontrar os ícones?
Cada ícone de cada kit possui um nome único e você precisa saber o nome deles para poder usá-los. Para isso, você precisa acessar o catálogo de ícones dos kits e copiar o nome dos ícones desejados.
⚠ Ah, e alguns desses kits possuem duas versões: uma gratuita e uma Premium. Meus temas possuem apenas as versões gratuitas desses kits instaladas, portanto, só é possível utilizar os ícones de suas versões gratuitas. Se você tentar usar os ícones que fazem parte das versões Premium, eles simplesmente não irão funcionar.
Aqui estão os links dos catálogos das versões gratuitas dos kits que já vêm instalados em meus temas:
Em alguns desses catálogos você encontrará o código HTML ou o nome de cada ícone bem na frente ou abaixo dele, em outros você precisa clicar nos ícones para ver o seu código/nome.
Os códigos podem aparecer escritos de formas ligeiramente diferentes em cada catálogo, mas todos eles funcionam sendo escritos da seguinte forma:
<i class="nome-do-icone"></i>Ou:
<span class='nome-do-icone'></span>Ou seja, tudo o que você precisa é copiar um desses dois pequenos códigos acima (qual deles tanto faz, os dois funcionam exatamente da mesma forma) e substituir a parte onde eu escrevi nome-do-icone pelo nome do ícone que você quer. E também para cada kit, você precisa incluir o ID desse kit atrás do nome do ícone, que são:
- Para o FontAwesome: o código dos ícones devem incluir atrás do seu nome:
fas fa-(para ícones do estilo "sólido" do kit);far fa-(para ícones do estilo "linear" do kit);- ou
fab fa-(para os ícones do kit que são logos de marcas).
- Para o LinearIcons: o código de cada ícone deve incluir "
lnr lnr-" atrás do seu nome. O site do LinearIcons também já disponibiliza o código HTML de cada ícone pronto, é só copiar e colar; - Para o CappuccIcons: o código de cada ícone deve incluir "
cp cp-" atrás do seu nome.
Então aqui vai um exemplo; o código a seguir irá mostrar o ícone Home (casa) do FontAwesome:
<i class="fas fa-home"></i>Outro exemplo; o código a seguir irá mostrar o ícone de sorvete do CappuccIcons:
<i class="cp cp-ice-cream"></i>Passo 3: Como editar os ícones no tema?
Agora que você já sabe onde encontrar o código dos ícones, basta ir nas Opções de Tema e digitá-los/colá-los nas opções certas para ícones. As opções de ícones geralmente são nomeadas como "Button Icon", "Title Icon" ou qualquer coisa com "Icon" na frente:
Na verdade, você pode colocar código de ícones em qualquer opção do tema que aceite texto. Alguns temas já vêm com lugares próprios para ícones, mas se você quiser, por exemplo, colocar ícones no menu de um tema não possui espaços próprios para ícones no menu, você pode improvisar colocando o código dos ícones antes (ou depois) do texto que vai ser o título do botão, dentro da mesma opção de texto mesmo, assim:
Apenas não esqueça que o tema que você está usando precisa conter o kit dos ícones que você quer usar instalado nele. Se não estiver instalado, não importa onde você coloque os códigos dos ícones, eles nunca irão funcionar. Mas se estiverem instalados, funcionarão em qualquer lugar do tema.
Para meus temas antigos:
Se você estiver usando algum dos meus temas antigos (lembre-se que esses temas não estão mais recebendo atualizações), pode ser que ele não possua nenhum kit de ícones instalado, especialmente os mais antigões. Mas para os que vêm com alguns kits, neles os ícones precisam ser configurados de uma forma diferente do que em meus temas atuais.
Se voce está usando um dos meus temas antigos e, em suas Opções de Tema, ele tiver opções para colocar ícones, então isso quer dizer que ele tem os kits do FontAwesome e LinearIcons instalados, e talvez — apenas talvez — o CappuccIcons também. E para editar os ícones nesses temas, você não deve colocar o código HTML inteiro do ícone que quer usar, e sim apenas o seu nome seguido do ID do kit ao qual ele pertence, desse jeito:
- Se tiver ficado com alguma dúvida, não hesite em pedir ajuda. Você pode me enviar uma mensagem rápida por aqui.
