Como Usar Emojis en Una Lista HTML

2 minuto(s)

En esta página:

Demo Github

Las listas HTML ordenadas (ol) o desordenadas (ul) nos permiten mostrar información relevante a los usuarios.

Cuando unimos CSS y HTML podemos lograr cosas geniales en las listas, como usar emojis como iconos de los elementos de una lista.

En este tutorial te enseñaré a Como Usar Emojis en Una Lista HTML, vamos con ello.

Creo mi lista HTML y le asigno un nombre de clase, le pondré de nombre a la clase mi-lista-con-emojis, tu le puedes poner el nombre que desees a tu clase:


<ul class="mi-lista-con-emojis">
  <li>Fresa</li>
  <li>Plátano</li>
  <li>Melón</li>
  <li>Uva</li>
  <li>Naranja</li>
</ul>

<li>Fresa</li>

<li>Plátano</li>

<li>Melón</li>

<li>Naranja</li>

</ul>

Luego en el código CSS definimos lo siguiente:


@counter-style emojis {
     system: cyclic;
     symbols: "🎉" "😂" "🔥" "✅" "❤️";
     suffix: " ";
}
 .mi-lista-con-emojis {
     list-style-type: emojis;
}

@counter-style emojis {

system: cyclic;

symbols: "🎉" "😂" "🔥" "✅" "❤️";

suffix: " ";

}

.mi-lista-con-emojis {

list-style-type: emojis;

}

Hacemos uso de la regla @counter-style de CSS, la cual nos permite agregar emojis personalizados.

Luego en la clase .mi-lista-con-emojis heredamos la configuración que hicimos en la regla @counter-style de CSS.

Si miramos nuestra página HTML en el navegador, podemos ver nuestra lista con los emojis asignados:

Lista HTML usando emojis — Puedes agregar tus propios emojis personalizados

Así de fácil puedes Usar Emojis en Una Lista HTML.

Al inicio de este tutorial he colocado una demo para que veas el proyecto en acción y un enlace a un repositorio de GitHub con el código del proyecto.

Aprende a Como Crear Un Dominio con Inteligencia Artificial.