Dashicons. A fonte de ícones do painel do WordPress

Desde a versão 3.8, lançada em Dezembro de 2013, o WordPress substituiu o sprite de ícones por uma fonte de ícones em seu painel administrativo chamada Dashicons.

A família cresce a cada nova versão lançada e a medida que se faz necessário para acompanhar a evolução da plataforma.

Na versão 3.9, por exemplo, foram adicionados 30 novos ícones. Outros 20 na versão 4.1. É importante acompanhar as novidades das novas versões do WordPress para ficar por dentro.

Exemplos práticos de uso da Dashicons

Desenvolvedores WordPress podem utilizar os ícones da fonte utilizada pelo core do WordPress em seus plugins e temas.

As vantagens em utilizar são inúmeras, mas precisamos destacar algumas delas: manter unidade visual, melhor performance de carregamento, melhor experiência e familiaridade para os usuários, praticidade e ganho de tempo.

A forma de uso mais clara é a aplicação dos ícones nos itens de menu administrativos pelo WP e seus plugins.

Observe na imagem ilustrativa que alguns plugins adicionam ícones coloridos saindo do padrão visual. Mesmo não tendo os ícones desejados considere manter a unidade visual.

Como visualizar e escolher os Dashicons

A Dashicons tem uma página na seção dedicada aos Developers no WordPress.org.

Nessa página é possível visualizar todos os ícones disponíveis. Filtrar pelo desejado ou percorrer a página em busca do ícone. Clicando, ou pesquisando, no ícone ele é exibido em destaque e oferece as opções de copiar seu nome, CSS, HTML e Glyph.

Exemplo de uso da interface da página da Dashicons

Como fazer uso dos ícones nos itens de menu administrativos

Os itens de menu administrativos são adicionados no WordPress através das funções add_menu_page() e register_post_type(). A primeira é utilizada explicitamente para adicionar páginas ao menu; a segunda para registrar um novo tipo de Post, e por conseguinte uma página no menu.

Como usar um Dashicon na função add_menu_page()

A função add_menu_page(), utilizada para adicionar uma página de primeiro nível no menu do painel, tem um parâmetro chamado $icon_url que aceita um nome de dashicon.

Um exemplo de uso da função add_menu_page() com o Dashicon “Yes”.

function exemplo_uso_add_menu_page() {
 
 add_menu_page(
 'Título da página',
 'Título do menu',
 'nome_da_capability',
 'slug_unico_para_este_menu',
 'function_php_para_exibir_conteudo_da_pagina',
 'dashicons-yes'
 );

}
add_action( 'admin_menu', 'exemplo_uso_add_menu_page' );

Em seus primórdios, os desenvolvedores salvavam a imagem e utilizam a URL do seu endereço como valor do referido parâmetro. Isso ainda é utilizado caso nenhum ícone da Dashicons te sirva.

Como usar um Dashicon na função register_post_type()

A função register_post_type() é utilizada para registrar um novo tipo de Post no WordPress. No caso de um tipo público ele ganha um menu para acesso a sua interface, e esse item de menu tem uma representação visual através da Dashicons.

function exemplo_uso_register_post_type() {

 register_post_type( 
 'chave_unica_do_cpt',
 array(
 'public' => true,
 'menu_icon' => 'dashicons-awards'
 )
 )

}
add_action( 'init', 'exemplo_uso_register_post_type' );

Indo além com Dashicons

O uso mais comum das Dashicons é no back-end do WordPress. Mais especificamente nos itens do menu. E a forma mais clássica de usa-los é através das funções add_menu_page() e register_post_type() como demonstrado acima.

No entanto, é possível explorar ainda mais a Dashicons no front-end. Bem como no Photoshop. Isso possibilita trazer mais dos tipos de profissionais, além dos programadores back-end, para a festa: os desenvolvedores front-end e os designers.

Como utilizar a Dashicons no front-end

Quando menciono front-end, estou me referindo aos temas WordPress. A representação visual responsável pela experiência e contato com os visitantes do seu site.

É possível carregar a folha de estilo da Dashicons e se beneficiar dos seus ícones na interface. Uma vez que o CSS está a disposição basta fazer uso das classes específica de cada ícone.

Na página da Dashicons é disponibilizado, para cada ícone, um exemplo de CSS e HTML. Vamos ter como exemplo o ícone de “share“. O CSS e HTML para ele, respectivamente, seria:

content: "\f237";

<span class="dashicons dashicons-share"></span>

Importante frisar que a propriedade CSS deve ser aplicada através do seletor :before.

O CSS da Dashicons pode ser carregado de duas formas. De forma autônoma ou especificando que sua folha de estilo principal é dependente dela.

Exemplo de código para carregar o estilo da Dashicons de forma autônoma

function exemplo_dashicons_frontend() {
 
 wp_enqueue_style( 'dashicons' );

}
add_action( 'wp_enqueue_scripts', 'exemplo_dashicons_frontend' );

Exemplo de código para carregar o estilo da Dashicons como provedor

function exemplo_dashicons_frontend_provedor() {
 
 wp_enqueue_style( 'meu-css-fodao', get_stylesheet_uri(), array( 'dashicons' ) );

}
add_action( 'wp_enqueue_scripts', 'exemplo_dashicons_frontend_provedor' );

Como utilizar a fonte Dashicons do WordPress no Photoshop

A versão web da fonte oficial do WP não funciona no Adobe Photoshop. É preciso baixar e instalar a versão OTF para em seguida utilizada no software gráfico.

A versão OTF da Dashicons está disponível no Github. Baixe-a, instale e em seguida faça uso nas suas próximas criações.

Na página da Dashicons através da opção “Copy Glyph” é possível copiar o texto o qual deve ser colado no editor de texto do Photoshop que o reconhecerá. Designers aconselham o uso da opção “Sharp” na suavização (smoothing) da fonte.

Como criar ícones para a Dashicons

Há várias opções de ícones na Dashicons, pode acontecer de não encontrar o ícone desejado para o seu projeto. E nesse caso você pode criar o seu próprio.

Criar ícones para a Dashicons é comum em duas ocasiões: para contribuir com o WordPress ou garantir um ícone exclusivo e personalizado para seu plugin, por exemplo.

Há uma página no WordPress.org com o guia de estilo para ser seguido na criação de ícones para a Dashicons. Os vídeos abaixo ilustram de forma detalhada o processo criativo, inclusive detalha como foi o processo para a versão 3.8, ou seja, o início de tudo.

Conte para nós através dos comentários como tem sido sua experiência com a Dashicons do WordPress.