Você deseja adicionar repositórios de ícones e poder usar ícones personalizados em seu tema WordPress? Recentemente, um de nossos leitores perguntou qual é a maneira mais fácil de adicionar repositórios de ícones em seu tema WordPress.
Os repositórios de ícones permitem adicionar ícones vetoriais (redimensionáveis) sem diminuir a velocidade do seu site. Eles são carregados como fontes e podem ser estilizados usando CSS.
Neste artigo, mostraremos como adicionar facilmente repositórios de ícones e usar ícones personalizados em seu tema WordPress, passo a passo.
O que são repositórios de ícones e por que você deve usá-los?
Os repositórios de ícone contêm símbolos ou pictogramas em vez de letras e números. Esses pictogramas podem ser facilmente adicionados ao conteúdo do site e redimensionados usando CSS. Comparados aos ícones baseados em imagens, os ícones vetoriais são muito mais rápidos, o que ajuda na velocidade geral do seu site WordPress.
As ícones vetoriais podem ser usados para exibir os ícones em áreas importantes do seu site para estiliza-lo. Por exemplo, você pode usá-los no seu carrinho de compras , botões de download e até mesmo em menus de navegação do WordPress .
Existem vários repositórios de ícones gratuitos e de código aberto disponíveis com centenas de belos ícones.
Na verdade, cada instalação do WordPress vem com o conjunto gratuito de repositório de ícones. Esses ícones são usados no menu de administração do WordPress e outras áreas dentro da área de administração do WordPress.
Algumas outras fontes de ícones populares são:
Por causa deste tutorial, usaremos o Font Awesome. É a fonte de ícone de código aberto mais popular disponível. Usamos FontAwesome no site Império WP, este repositório é utilizado em muitos plugins WordPress como Convert Pro, Fluent Forms, Rank Math etc.
Neste guia, vamos cobrir três maneiras de adicionar repositórios de ícones no WordPress. Você pode escolher a solução que funciona melhor para você.
Adicionando repositórios de ícones no WordPress usando plugins
Se você for um usuário de nível iniciante apenas tentando adicionar alguns ícones a seus posts ou páginas, este método é adequado para você. Você não teria que modificar os arquivos de tema e seria capaz de usar fontes de ícones em qualquer lugar do seu site.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Font Awesome para WordPress. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin no WordPress.
Após a ativação, o plugin habilita o suporte do Font Awesome para o seu tema. Agora você pode editar qualquer post ou página do WordPress e usar o ícone com um shortcode como este:
[icon name="rocket"]
Você pode usar este shortcode junto no meio do conteúdo no Editor Clássico ou em um bloco de shortcode no Editor Gutenberg.
Depois de adicionado, você pode visualizar seu post ou página para ver como o ícone ficará em um site ao vivo. Aqui está como parecia em nosso site de teste.
Você também pode adicionar o shortcode do ícone dentro de um bloco de parágrafo, onde pode usar as configurações de bloco para aumentar o tamanho do ícone.
Conforme você aumenta o tamanho do texto, isso pode parecer estranho dentro do editor de texto. Isso ocorre porque o shortcode não muda automaticamente para uma fonte de ícone dentro do editor de bloco.
Você precisará clicar no botão de visualização em seu post ou página para ver como ficaria o tamanho real do ícone.
Você também pode usar no ícone da seta na barra de ferramentas do editor de bloco de paragrafo no editor Gutenberg, para acessar a coleção completa de ícones do Font Awesome:
Após clicar no botão “Font Awesome Icon” abrirá uma janela dentro de um pop-up que permitirá que você escolha ou pesquisa pelo o seu ícone preferido com um clique do mouse:
Se você estiver utilizando o editor clássico, você pode ter acesso a biblioteca e ícones do Font Awesome através de um botão acima do editor:
2. Usando repositórios de ícones com um construtor de páginas WordPress
Os plugins mais populares de construtor de páginas do WordPress vêm com suporte integrado para repositórios de ícones. Isso permite que você use facilmente ícones personalizados em suas landing pages, bem como em outras áreas de seu site.
Beaver Builder
Beaver Builder é um dos melhores plugins de criação de páginas WordPress do mercado. Ele permite que você crie facilmente layouts de página personalizados no WordPress sem escrever nenhum código.
O Beaver Builder vem com belos ícones e módulos prontos para usar que você pode simplesmente arrastar e soltar em seus post e páginas.
Com Beaver Builder você pode criar grupos de ícones, adicionar um único ícone e movê-los para linhas e colunas bem posicionadas. Você também pode selecionar suas próprias cores, plano de fundo, espaçamento e margem sem escrever código CSS.
Elementor Pro
O Elementor é outro plugin popular de criação de páginas do WordPress. Ele também vem com vários elementos que permitem o uso de repositórios de ícones, incluindo um elemento de ícone.
Você pode simplesmente arrastar e soltar um ícone em qualquer lugar e usá-lo com linhas, colunas e tabelas para criar belas páginas.
Outros criadores de páginas populares, como Divi e Visual Composer, também oferecem suporte completo para repositórios de ícones.
3. Adicionando repositórios de ícones no WordPress manualmente com código
Como mencionamos anteriormente, os repositórios de ícones são apenas fontes e podem ser adicionadas ao seu site como você adicionaria qualquer fonte personalizada.
Algumas fontes de ícone, como Font Awesome, estão disponíveis em servidores CDN na web e podem ser vinculadas diretamente a partir de seu tema WordPress.
Você também pode fazer upload de todo o diretório de fontes para uma pasta em seu tema WordPress e, em seguida, usar essas fontes em sua folha de estilo CSS.
Como estamos usando o Font Awesome para este tutorial, mostraremos como você pode adicioná-lo usando os dois métodos.
Método 1:
Este método manual é bastante fácil.
Primeiro, você precisa visitar o site do Font Awesome e inserir seu endereço de e-mail para obter o código de incorporação.
Agora verifique sua caixa de entrada por um e-mail do Font Awesome com seu código de incorporação. Copie e cole este código embed no arquivo header.php do seu tema WordPress antes da tag </head>.
Seu código incorporado será uma única linha que buscará a biblioteca Font Awesome diretamente de seus servidores CDN. Vai parecer algo assim:
&lt;script src="https://use.fontawesome.com/d0d438dabc.js"&gt;&lt;/script&gt;
Este método é o mais simples, mas pode causar conflitos com outros plugins.
Uma abordagem melhor, seria carregar corretamente o JavaScript no WordPress usando o mecanismo de enfileiramento integrado.
Em vez de vincular à folha de estilo ao cabeçalho do seu tema, você pode adicionar o seguinte código no arquivo functions.php do seu tema:
function iwp_load_fa() {
wp_enqueue_script( 'iwp-fa', 'https://use.fontawesome.com/d0d438dabc.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'iwp_load_fa' );
Método 2:
O segundo método não é o mais fácil, mas permitiria que você hospedasse as fontes do ícone Font Awesome em seu próprio site.
Primeiro, você precisa visitar o site Font Awesome para baixar o pacote de fontes para o seu computador.
Basta baixar as fontes do ícone e descompactar o pacote.
Agora, você precisará se conectar à sua hospedagem WordPress usando um cliente FTP e ir para o diretório do seu tema WordPress.
Dentro da pasta do seu tema você precisa criar uma nova pasta e nomeá-la como “font”. Em seguida, você precisa carregar o conteúdo da pasta de fontes de ícone do Font Awesome para o diretório de fontes em seu servidor de hospedagem na web.
Agora você está pronto para carregar fontes de ícones em seu tema WordPress. Simplesmente adicione este código ao arquivo functions.php do seu tema:
function iwp_load_fa() {
wp_enqueue_style( 'iwp-fa', get_stylesheet_directory_uri() . '/fonts/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'iwp_load_fa' );
Você carregou com sucesso o Font Awesome em seu tema WordPress.
Agora vem a parte em que você adicionará ícones reais ao seu tema, posts ou páginas do WordPress.
Exibindo ícones manualmente no WordPress
Acesse o site do Font Awesome para ver a lista completa de ícones disponíveis. Clique em qualquer ícone que deseja usar e você poderá ver o nome do ícone.
Copie o nome do ícone e use-o assim no WordPress.
<i class="fa-arrow-alt-circle-up"></i>
Você pode estilizar este ícone na folha de estilo CSS do seu tema assim:
.fa-arrow-alt-circle-up {
font-size:50px;
color:#FF6600;
}
Você também pode combinar diferentes ícones e estilizá-los ao mesmo tempo. Por exemplo, digamos que você deseja exibir uma lista de links com ícones ao lado deles. Você pode envolvê-los em um elemento <div> com uma classe específica.
<div class="icons-group"> <a class="icons-group-item" href="#"><i class="fa fa-home fa-fw"></i>Home</a> <a class="icons-group-item" href="#"><i class="fa fa-book fa-fw"></i>Library</a> <a class="icons-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>Applications</a> <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Settings</a> </div>
Agora você pode estilizá-los na folha de estilo CSS do seu tema como este:
.icons-group-item i {
color: #333;
font-size: 50px;
}
.icons-group-item i:hover {
color: #FF6600
}
Esperamos que este artigo o tenha ajudado a aprender como adicionar facilmente fontes de ícone em seu tema WordPress.
