Não há dúvida de que os seres humanos são seres muito visuais. E como tal, focamos não apenas no conteúdo, mas também no design visual de um site.
Tradicionalmente, web designers e desenvolvedores de todo o mundo usavam imagens e sprites de imagem para incluir ícones em qualquer site.
Esses ícones foram usados em todo o site como um aprimoramento visual – no menu de navegação, na barra de pesquisa, no carregamento de ícones em controles deslizantes e similares.
No entanto, por mais conveniente que fosse esse método, ele também tinha algumas desvantagens. Essas desvantagens se tornaram óbvias quando o design responsivo entrou em jogo, o que faz com que essas imagens pareçam cortadas ou, pior ainda, completamente embaçadas.
A resposta para esse problema são os ícones de fonte. Eles exibem ícones totalmente responsivos e personalizáveis que adicionam um pouco mais ao design do seu site. Essencialmente, são fontes feitas de ícones.
Uma dessas fontes é FontAwesome. E hoje, mostrarei como adicionar ícones FontAwesome facilmente ao seu site WordPress.
O que você vai aprender neste tutorial
- O que são fontes de ícones e por que você deve usá-las
- Como adicionar fontes de ícone no WordPress usando plugins
- Como adicionar fontes de ícone no WordPress manualmente
O que são fontes de ícones e por que você deve usá-las?
As fontes de ícones contêm símbolos ou pictogramas em vez de letras e números. Eles podem ser facilmente redimensionados usando CSS e não aumentarão o tempo de carregamento da página, ao contrário dos sprites de imagem usados anteriormente.
Você pode usá-los para adicionar ícones aos seus menus de navegação, caixas de recursos, títulos de postagens e muito mais.
Existem várias razões pelas quais você deve usar uma fonte de ícone diferente da aparência visual:
- Os ícones de fonte são totalmente responsivos – são essencialmente arquivos vetoriais, o que significa que podem ser dimensionados para qualquer tamanho sem perder a qualidade.
- Ícones de fonte podem ser estilizados, posicionados e manipulados – Como são fontes, você pode manipulá-los da mesma forma que faria com uma fonte tradicional. Defina sua cor, altere seu estilo ao passar o mouse, controle seus alinhamentos, defina seu tamanho e muito mais.
- Os ícones de fonte são altamente compatíveis com vários navegadores e há muitos deles.
- Os designers passaram inúmeras horas nesses ícones e eles são atualizados com frequência e visam fornecer a melhor experiência.
Existem duas maneiras de adicionar FontAwesome ao seu site WordPress e abordaremos os dois métodos. O primeiro método envolve o uso de um plugin e o segundo envolve a adição da fonte manualmente.
Opção 1 – Adicionando fontes de ícones no WordPress usando plugins
Usar um plugin é, de longe, o método mais fácil de adicionar qualquer ícone de fonte ao seu site. Neste exemplo, usaremos o Better Font Awesome para adicionar a fonte ao site.
Passo 1 – Instalar e ativar
A primeira coisa que você precisa fazer é instalar e ativar o plugin Better Font Awesome.
Navegue até o seu painel e clique em Plugins > Adicionar Novo. Procure por FontAwesome e clique em Instalar.
Por último, ative o plugin. Após a ativação, você pode visitar a página Configurações > Better Font Awesome para definir as configurações do plug-in. Na maioria dos casos, isso não é necessário, pois o plug-in funciona imediatamente, portanto, você não precisará alterar nada lá.
Passo 2 – Adicionando seus ícones de fonte
Better Font Awesome permite que você adicione ícones de fonte usando vários códigos de acesso como este:
[nome do ícone=”binóculos”]
[nome do ícone=”presente”]
[nome do ícone=”mapa”]
Os ícones também podem ser adicionados no editor de postagens simplesmente selecionando o ícone desejado. Se você criar uma nova postagem agora, notará um novo ícone em seu editor de postagem. Clicar nele abrirá um pop-up onde você poderá localizar um ícone e inseri-lo.
Passo 3 – Personalize seus ícones de fonte
O plug-in adicionará um código de acesso em sua postagem e, se você quiser personalizar ainda mais o ícone, poderá fazê-lo adicionando sua própria classe CSS a ele e inserindo os estilos específicos em sua folha de estilo.
O shortcode padrão se parece com isso:
[icon name=”café” class=”” unprefixed_class=””]
Depois de adicionar uma classe para fins de estilo, ela se parece com isso:
[icon name=”café” class=”” unprefixed_class=””]
Depois de adicionar uma classe para fins de estilo, ela se parece com isso:
[icon name=”coffee” class=”mycoffeeicon” unprefixed_class=””]
Para estilizá-lo, vá para Aparência > Editor e abra a folha de estilo do seu tema. Adicione as seguintes linhas a ele:
i.fa.fa-coffee.fa-mycoffeeicon {
tamanho da fonte: 100px;
cor:#ba1157;
}
É simples assim.
Agora vamos ver como adicionar FontAwesome manualmente.
Opção 2 – Adicionando fontes de ícones no WordPress manualmente
Fontes de ícones nada mais são do que fontes que consistem em ícones. Como tal, eles podem ser facilmente adicionados, assim como você adicionaria qualquer fonte personalizada. Algumas fontes de ícones, como FontAwesome, estão disponíveis em servidores CDN na web e podem ser vinculadas diretamente ao 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.
Vamos cobrir os dois métodos aqui.
Método 1 – Adicionando código ao arquivo header.php do seu tema
O método mais fácil é incluir uma linha no arquivo header.php do seu tema, logo antes da tag </head>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
Mesmo que este seja o método mais fácil, não é realmente a maneira correta do WordPress e pode causar conflitos com outros plugins. Uma abordagem muito melhor é enfileirar corretamente a folha de estilo no WordPress por meio do arquivo functions.php.
Clique em Aparência > Editor e selecione seu arquivo functions.php. No final, adicione as seguintes linhas:
function ala_load_fa() {
wp_enqueue_style('ala-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
}
add_action( 'wp_enqueue_scripts', 'ala_load_fa' );
Quando terminar, clique no arquivo de atualização.
Método 2 – Adicione ícones de fonte ao diretório do seu tema WordPress
O segundo método permite que você tenha os ícones prontamente disponíveis em seu tema e inclui um pouco de trabalho braçal. Primeiro, você precisa baixar a fonte do ícone e descompactar o pacote. Em seguida, use um programa como o FileZilla para se conectar ao seu site via FTP.
Vá para o diretório do seu tema WordPress, crie uma nova pasta e nomeie-a como fonts ou fontawesome.
Em seguida, carregue o conteúdo das fontes do ícone para a pasta que você acabou de criar.
Feito isso, você precisará adicionar as fontes ao seu tema WordPress. Simplesmente adicione este código ao arquivo functions.php do seu tema.
function ala_load_fa() {
wp_enqueue_style( 'ala-fa', get_stylesheet_directory_uri() . '/fontawesome/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'ala_load_fa' );
Clique no arquivo de atualização e você terá carregado com sucesso FontAwesome em seu tema WordPress.
A parte final é adicionar ícones ao seu tema, posts ou páginas do WordPress.
Você pode fazer isso manualmente incluindo o nome do ícone em qualquer lugar que deseja exibir.
Acesse o site da Font Awesome para ver a lista completa de ícones disponíveis. Clique em qualquer ícone que você deseja usar e você poderá ver o nome do ícone. Clique em Copiar para copiar o nome do ícone e insira-o em seu editor de postagem ou página:
<i class="fa-coffee"></i>
Você também pode personalizar o ícone na folha de estilo como fizemos acima.
Você também pode combinar diferentes ícones e estilizá-los de uma só vez. Isso é útil se você quiser, por exemplo, criar uma lista de links com ícones próximos a eles. Simplesmente envolva-os em um elemento div com uma classe específica assim:
<div class="meus-ícones"> <a class="icons-group-item" href="#"><i class="fa fa-apple fa-fw"></i>Página inicial</a> <a class="icons-group-item" href="#"><i class="fa fa-bars fa-fw"></i>Biblioteca</a> <a class="icons-group-item" href="#"><i class="fa fa-asterisk fa-fw"></i>Aplicativos</a> <a class="icons-group-item" href="#"><i class="fa fa-cog fa-fw"></i>Configurações</a> </div>
Agora você pode estilizá-los na folha de estilo do seu tema assim:
.icons-group-item i {
cor: #333;
tamanho da fonte: 50px;
}
.icons-group-item i:hover {
cor: #ba1157;
}
Pensamentos finais
Em um tutorial anterior, mostramos como adicionar Dashicons ao WordPress e como usá-los. Adicionar FontAwesome é bastante semelhante. É uma ótima maneira de tornar seu site mais interessante e há muitas maneiras de usar fontes de ícone.
Você pode usá-los para estilizar seu menu de navegação ou adicioná-los aos títulos das postagens. Você pode usá-los dentro de suas postagens, quando quiser chamar a atenção para algo importante.
Você pode até adicioná-los aos seus widgets, pois os widgets aceitam entrada HTML. Considere quanto mais seu widget de boletim informativo poderia ser se você adicionasse um ícone de envelope a ele? Ou, se você usar uma caixa de autor, poderá usar o FontAwesome para exibir seus perfis de mídia social.
A melhor parte é que, não importa qual dispositivo ou navegador seus visitantes estejam usando, eles sempre poderão ver ícones nítidos e responsivos.
