Você gostaria de adicionar fontes de ícone ao seu blog WordPress ? Nesta época natalícia, toda a gente quer personalizar mais o seu blog para oferecer uma imagem melhor do mesmo. Os ícones de fonte fazem parte dos arranjos que são feitos regularmente.

Neste tutorial, mostrarei como adicionar fontes de ícone ao seu blog WordPress.

iconfontswp-1

Pequena precisão em fontes-ícones

Os ícones de fonte contêm símbolos ou pictogramas em vez de letras e números. Esses pictogramas podem ser facilmente redimensionados via código CSS sem afetar significativamente o tamanho das páginas.

icomoon

As fontes de ícone podem ser usadas para exibir símbolos bastante comuns. Em um site típico, você pode usá-los para exibir o ícone do carrinho, botões de download, controles deslizantes, botões de mídia social e até mesmo em menus de navegação do WordPress.

Existem vários ícones de fontes disponíveis com opções diferentes. De fato, toda instalação do WordPress usa Dashiconsque é um conjunto de fontes. Esses ícones são usados ​​na barra de usuário do painel.

Aqui estão alguns projetos de fontes-ícones:

Para este tutorial, estarei usando Font Awesome, que por sinal é uma das fontes de ícones mais usadas e gratuitas.

Exploraremos a adição de fontes de ícone ao seu tema WordPress. O primeiro método é feito usando um plugin e também mostraremos como fazê-lo sem um plugin.

Como adicionar ícones de fontes com um plugin do WordPress

FontAwesome é compatível com vários plug-ins. O uso de um plug-in permite adicionar facilmente um ícone de fonte ao seu tema sem modificar o código-fonte.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Melhor Font impressionante, disponível em WordPress.org. Depois de ativar o plugin, você precisa navegar para o seguinte local: " Configurações> Melhor fonte incrível“, Para configurar o plugin. No entanto, este plugin pode funcionar sem configuração, então os usuários não precisam realmente alterar nada.

betterfontawesome

Este plugin permite que você adicione fontes de ícones da seguinte forma:

[nome do ícone = "foguete"]

[nome do ícone = "nuvem"]

[nome do ícone = "fones de ouvido"]

Você pode adicionar os ícones na interface de edição do artigo, escolhendo entre os ícones disponíveis. Basta criar um novo artigo e você notará o ícone " Inserir Ícone Botão Na barra de ferramentas do editor visual.

Clicar nele abrirá uma nova janela onde você pode localizar um ícone e inseri-lo.

fa-posteditor

Você notará que o plugin adicionará um botão semelhante a este:

[icon name = "universidade" classe = "" unefixed_class = ""]

Se você quiser adicionar mais opções de personalização, você pode adicionar sua própria classe para estilos personalizados.

[icon name = "universidade" classe = "myclass" unefixed_class = ""]. Veja como você personalizará a classe do seu ícone:

.fa-myclass {font-size: 100px; Cor: #FF6600; } 

É realmente muito simples. Você percebe que a classe é precedida por "fa-". Não se esqueça de adicioná-lo ao código CSS.

Como adicionar uma fonte de ícone no WordPress manualmente

Como foi mencionado anteriormente neste tutorial, mostrarei como adicionar uma fonte de ícone em seu blog manualmente.

Algumas fontes de ícones, como Font Awesome, estão disponíveis em servidores CDN em todo o mundo e podem ser vinculadas a seu blog diretamente.

Você também pode enviar os arquivos deste ícone de fonte diretamente para a pasta do seu tema WordPress. Mostrarei como adicionar o ícone da fonte Font Awesome ao seu blog.

Primeiro método: 

Este é o método mais fácil. Você só precisa adicionar esta linha no " »Do seu tema (geralmente está no arquivo header.php).


Este método é simples, mas pode causar muitos conflitos com outros plug-ins. A melhor abordagem é carregar os scripts do WordPress para adicioná-los à fila.

função wp_load_fa () {wp_enqueue_style ( 'wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); } add_action ( 'wp_enqueue_scripts', 'wp_load_fa');

Segundo método: 

O segundo método não é o mais fácil, mas permite que você tenha fontes de ícones em seu tema. Tudo que você precisa fazer é baixar e descompactar o pacote do ícone da fonte (arquivo compactado) no arquivo "Fontes" do seu tema.

Você só precisa baixar o ícone da fonte e renomeá-lo. O que você precisa fazer a seguir é carregar a fonte do ícone do seu servidor.

ftpupload

Agora que você está pronto para carregar as fontes de ícones em seu tema WordPress, você só precisa adicionar o seguinte código no arquivo " functions.php »Do seu tema WordPress ou no seu WordPress Plugin.

função wp_load_fa () {wp_enqueue_style ( 'wpb-fa', get_stylesheet_directory_uri () '/fonts/css/font-awesome.min.css.'); } add_action ( 'wp_enqueue_scripts', 'wp_load_fa');

Isso é tudo que há para fazer.

Como exibir manualmente os ícones de fonte no seu blog

Vá para o blog Font Awesome e veja a lista de fontes disponíveis. Clique em qualquer imagem e você verá o código dessa imagem.

fa-optinmonster

Basta copiar e colar e o seguinte código:

<i class="fa-optin-monster"></i>

No modo de editor de texto. Você pode usar a classe para fazer uma alteração no ícone da fonte.

Se você precisa saber mais sobre CSS, eu o convido a leia este tutorial. É isso para este tutorial. Sinta-se à vontade para compartilhar com seus amigos nas suas redes sociais favoritas.