En este tutorial aprenderemos a cómo instalar y usar los iconos Ionicons en nuestra instalación de WordPress. Sin utilizar ningún plugin, sólo código.

Hoy en día es muy común utilizar una librería de iconos para utilizarlos en nuestra página web. Actualmente hay muchas opciones que elegir. Cómo vimos en un tutorial anterior, aprendimos a cómo usar los iconos de Font Awesome 5.

Esta vez le toca el turno a los Ionicons.

Esta biblioteca de iconos es muy común verlo en los temas de StudioPress, ya que es muy ligera y dispone de iconos muy útiles para usar.

Antes de nada, te recomiendo que le eches un vistazo si tu tema ya utiliza una biblioteca de iconos, ya que en caso afirmativo, ya podrías utilizar la existente o deshacerte de ella para quedarte sólo con Ionicons. Utilizar bibliotecas de iconos impacta negativamente (aunque sea ligeramente) al rendimiento de nuestra página web, por lo tanto hay que vigilar siempre en utilizar tan sólo una de ellas.

Por este motivo, podrías buscar en el archivo «functions.php» palabras como «font-awesome», «dashicons» o incluso comprobar si «ionicons» ya aparece.

No obstante, siempre te recomendaré utilizar únicamente la libreria de dashicons, que es la que viene por defecto en cualquier instalación de WordPress. Aunque sea muy una librería muy limitada, es la más ligera y no impactará negativamente a tu página web.

Pero si te gusta mucho los iconos de Ionicons y los ves indispensables para tu página web, añadirlos es muy fácil.

¡Vamos a ello!

Usar los iconos de Ionicons en WordPress

Como siempre te recomiendo, añade este código en tu plugin personalizado o en el functions.php de tu tema.

// Usar Ionicons en WordPress
add_action( 'wp_enqueue_scripts', 'jc_enqueue_ionicons' );
function jc_enqueue_ionicons() {
	wp_enqueue_style( 'ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
}

A continuación, si queremos utilizar alguno de sus iconos, tenemos que entrar en la biblioteca de Ionicons y seleccionar uno.

A continuación aparecerá una barra en la parte inferior y le daremos a Usage. Dentro de esta página, nos iremos al pie de la página y seleccionaremos el código que aparece en la sección de «Basic usage»

<i class="icon ion-md-flashlight"></i>

¡Y magia! Dicho icono aparecerá dentro del contenido que estés implementando. Esta lista de iconos te ayudará con un vistazo rápido a seleccionar el icono que más te gusta y utilizar el nombre de la clase pertinente.

Resumen y conclusión

Con este tutorial hemos aprendido a cómo instalar la librería en nuestro WordPress y sobre todo a cómo usarlos en nuestro contenido.

Recuerda que no es la única librería de iconos disponible, existen otras como la biblioteca de Font Awesome, que ya vimos en un anterior tutorial.

¿Te gustaría ver más tutoriales como este? Contacta conmigo y recomiéndame que quieres que escriba en el siguiente tutorial.