Blog de Estudios Media

Agregar iconos en wordpress con Dashicons2 min de lectura

Se pueden agregar iconos en wordpress mediante la implementación de Dashicons que es una librería de iconos que viene por defecto en el panel de administración de nuestro wordpress, sin embargo podemos valernos de esta librería y usarla en el frontend de nuestro sitio para decorar rápidamente algún que otro elemento de nuestro interés.

Ej:

agrear iconos en wordpress
como agregar iconos en wordpress mediante el uso de la librería Dashicons

Pasos para incluir Dashicons en wordpress

Solo debemos agregar en el function.php el siguiente código:

add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

el siguiente paso es agregar el código HTML del icono donde lo necesitemos

¿Cómo insertar un icono?

Simplemente debemos ir a esta website y hacer click en el icono que queramos usar.

agregar iconos en worpdress

 

A continuación, haga clic en el enlace Copy HTML, se abrirá una ventana emergente con el código del icono, para nuestro el ejemplo:

<span class="dashicons dashicons-admin-appearance"></span>


como agregar un icono en wordpress desde dashicons

 

 

Copie el código y péguelo dentro su HTML (ejemplo 1) si lo va a usar directamente en una plantilla o desde el editor de wp , en el tab TEXTO (ejemplo 2) y listo, ya hemos agregado nuestro icono en wordpress.

Ejemplo 1:

sublime-text-dashicon-html

 

Ejemplo 2:

Si vamos a incluir el código desde el editor de wordpress te doy esta recomendación:

 

wordpress-editor-texto

 

Agregar Dashicons en el Dashboard (admin menu)

Cuando nosotros creamos un custom post type (CPT) desde el function, debemos indicar una serie de argumentos para personalizar el mismo. La siguiente línea es la que indica el icono que tendrá nuestro CPT .

 

'menu_icon'    => 'dashicons-admin-users',

 

Y aquí hay un dashicon personalizado que se utiliza en un CPT llamdo Members.

 

admin-menu-dashicon

 

Esto ha sido todo por hoy, gracias por ver  «agrear iconos en wordpress».

Mauro L. Chius
Mauro L. Chius

Especialista en comercio electrónico y estratégias digitales.