Mostrar iconos junto a la información de los artículos en Genesis Sample

Algo que me gusta personalizar es la información de los artículos. Vamos a ver como mostrar iconos junto a la información de los artículos en Genesis Sample.

Un ejemplo real

La información del artículo es una de las cosas que si las añadimos dan mucha personalidad a un diseño. En un desarrollo que he llevado a cabo hace poco, el cliente quedó muy contento con este detalle. Basado en Genesis Sample, aunque difiere un poco del diseño original, os dejo captura.

Por supuesto, es un nombre de usuario ficticio :).

Bien maquetado, respetando los espacios y con una iconografía clara, queda un diseño muy limpio.

En la captura lo hice con Line Awesome. En el caso del tutorial, lo haremos con Dashicons, la tipografía de iconos que viene con Genesis Sample por defecto.

Pasaremos de esto:

A esto otro:

Y por supuesto, las categorías y las etiquetas al pie de los artículos.

Veamos los pasos.

Editamos el functions.php

Dado que Genesis Sample viene configurado para usar Dashicons no necesitaremos incluir el código para usarlos como ya conté en el artículo que explicaba como usar los Dashicons en Genesis.

Lo siguiente será editar la información del artículo para eliminar lo que no necesitemos. Introduce el siguiente código en el archivo functions.php de Genesis Sample.

Por supuesto, puedes poner en el orden que quieras los shortcodes para mostrar la información que creas más importante primero.

Sin CSS no hay iconos

El resto es CSS. Aplicar estilos para situar cada icono donde corresponde. Coloca este código CSS al final del archivo style.css de tu Genesis Sample.

Conclusión

Teniendo en cuenta que podemos variar el orden de la información, colores de los iconos e incluso los propios iconos, tenemos muchísimas posibilidades para adaptar esto casi a cualquier diseño.

Cualquier duda que tengas, déjala en los comentarios. Estaré encantado de responderla. Feliz Día! 🙂