Cómo utilizar los Dashicons en módulos de texto de Divi

Los dashicons son los iconos que utiliza WordPress para los menús. En este artículo voy a mostrar cómo utilizarlos en módulos de texto de Divi.

Estos iconos están basados en una fuente de tipo de letra para optimizar la carga de estos sin se que tenga que cargar una imagen propiamente dicha. Al ser un tipo de fuente, solo basta con indicar el código de cada carácter que equivale a la imagen que nos interesa y se visualiza igual que cualquier carácter del abecedario.

Galería de Dashicons de WordPress

La lista completa de iconos que podemos utilizar están disponibles en esta web de WordPress: https://developer.wordpress.org/resource/dashicons/#yes

En dicha web seleccionamos el icono que nos interesa y después podemos obtener el código CSS, HTML o Glyph.

En mi caso, tenía la necesidad de utilizarlo dentro de los módulos de texto de Divi y tuve algunos problemas porque no conseguía lo que necesaitaba, hasta que encontré la forma de hacerlo funcionar correctamente.

Resultado esperado

Este es un ejemplo de lo que conseguí hacer y sobre el que se basa la explicación hasta llegar a este resultado:

Aquí os explico cómo lo resolví.

Pasos para utilizar Dashicons en módulos de texto de Divi

Primero debemos seleccionar el dashicon que queremos utilizar. Nos vamos a la web de WordPress, seleccionamos el icono que más nos guste y su código CSS. En este ejemplo he seleccionado el icono de check o YES que tiene el código f147.

Para poder utilizarlo, nos vamos a nuestra Entrada o Página de WordPress, activamos el constructor de Divi y añadimos un Módulo de Texto.

Insertamos el siguiente texto en la pestaña de edición en HTML:

<ul>
<li class="yes-icon">Nuevas funcionalidades</li>
<li class="yes-icon">Mejoras en las funcionalidades</li>
<li class="yes-icon">Corrección de Bugs (Errores)</li>
<li class="yes-icon">Mejoras de seguridad</li>
</ul>

Ahora mismo este texto no mostrará el check que esperamos. Necesitamos crear la clase CSS "yes-icon" a la que hacemos referencia en cada uno de los elementos de la lista.

Para ello nos vamos al editor de la hoja de estilos de nuestro Child Theme de Divi y añadimos el siguiente código:

/* DASHICONS personalizados */
.yes-icon:before {
content: "\f147"; /* Lo obtenemos de https://developer.wordpress.org/resource/dashicons/#yes */
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: middle;
color: #1F567D; /* azul */
padding-right: 10px; /* separacion icono y texto */
}

.yes-icon {
list-style-type: none;
margin-left: -24px;
}
/* FIN - DASHICONS personalizados */

Este código CSS está modificado a mi gusto personal porque tenía problemas visuales con el identado de los bullets y el texto. No se ajustaba a mis necesidades y tuve que ajustar los márgenes y la separación entre los iconos y el texto. Vosotros podéis personalizarlo a vuestro gusto para que se adapte lo mejor posible a vuestra web.

Otro elemento que algunas ocasiones podéis encontrar necesario es activar el uso de los Dashicons en vuestro theme si este no lo tiene activo ya. En mi caso no tuve que hacerlo, pero por si un casual no os funcionara el ejemplo puede que tengáis que incluir el siguiente código en el fichero functions.php de vuestro theme:

// Habilitar el uso de Dashicons
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Siguiendo todos estos pasos podremos hacer uso de los Dashicons en módulos de texto de Divi sin problemas. Es un rollo tener que estar actualizando la hoja de estilos de nuestro Child Theme, pero es lo que hay de momento. Al menos, de esta manera podemos darle un toque más elegante a nuestros textos en vez de utilizar los bullets por defecto con el icono de la bolita.