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.
Tabla de contenidos
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.
Javier, muy buen post sobre como utilizar los dashicons en Divi para los que apenas empezamos en este mundo de Divi. Gracias por compartirlo, saludos.
Me alegra que te haya sido de utilidad. Saludos.
Hola, en caso de usar más de un ícono debemos repetir el código con el nombre del li class correspondiente, verdad?
A lo mejor en la última versión han cambiado esa ventana de configuración. Si la ves borrosa y con el tamaño correcto puede que sea porque la subiste de un tamaño inferior y woocomerce le aumentó el tamaño. Y por eso ahora la ves borrosa. Deberás subirla de nuevo y con buena resolución. Un saludo.
Si en cada elemento li quieres un icono, si.
Hola, no me queda claro donde esta la hoja de estilos en divi chil theme para añadir esto:
/* 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 */
me podrias orientar?
Hola Esmeralda. Está en Divi > Opciones del Tema > CSS Personalizado. Ahí pegas el código, guardas, y ya estaría aplicado en tu web esos estilos que añadas. Un saludo.