Poner emoticonos en las viñetas

Tiempo estimado de lectura: 3 minutos

 

Emoticonos en las viñetas

Esta semana aprenderemos a poner emoticonos en las viñetas de nuestras listas. Hace unas semanas hemos visto cómo crear un efecto de línea de tiempo en nuestras listas, y en esta ocasión cambiaremos esos puntitos de nuestras listas por emoticonos.

Un efecto muy visual y simpático

Crearemos un código que sustituirá el típico puntito de las viñetas de nuestras listas, por el emoticono que quieres. Así podrás personalizar el aspecto de las listas que utilizas en tu web.

¡Vamos a ello!

Código que vamos a utilizar

/* Añadir emoticonos a tus listas */
ul li {
list-style: none!important;
}
ul li::before {
content: "😁 "
}

¿Qué hace este código?

Como puedes ver, este código es muy sencillo, y con él hacemos lo siguiente: en primer lugar le decimos a WordPress que cuando se cree una lista (<ul>) y un elemento de lista (<li>), le vamos a quitar el puntito (list-style: none!important).

A continuación le vamos a poner contenido antes del elemento (los <ul> y <li>) con el parámetro before (ul li::before). Por último le ponemos como contenido el emoticono que queremos utilizar.

Pero… ¿de dónde sacamos los emoticonos?, pues tan sencillo como buscar en Google por emoticonos, y en el segundo o tercer resultado encontramos la página emoji10, o ir directamente a páginas que tengan emoticonos, como por ejemplo getemoji. Aquí solo tienes que seleccionar una categoría de emoticonos y copiar y pegar el que más te guste dentro del código. En mi caso yo he elegido la calavera 💀

Problema y solución

Como ya habrás imaginado, este código añade emoticonos a todas las listas que tengamos en nuestra web, esto incluye también a los menús, a los widgets de pie de página…

Para solucionar esto y hacer que únicamente tengan emoticonos las listas que yo quiera, tenemos que crear una clase que aplicaremos a las listas deseadas. El código puede ser algo parecido a este:

/* Poner los emoticonos en las listas que queramos */
.milista li {
list-style: none!important;
}
.milista li::before {
content: "💀 ";
}

Con esto le decimos a WordPress que aplique la clase .milista a todos los elementos de lista que yo elija.

Lo último que necesitamos saber es dónde tenemos que colocar este código. Al ser un código CSS sencillo, podemos pegarlo directamente en Apariencia, Personalizar, CSS adicional.

El resultado es este:

Poner emoticonos en las viñetas
Poner emoticonos en las viñetas


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *