Todos hemos visto o usado fontawesome como método para añadir iconos a nuestra web. Incluso he llegado a verla cargada sólo para añadir los iconos de las redes sociales 😔 (a tomar por saco el performance)

¿Qué rollo, no? Pues vamos a decir adios a fontawesome, y hola a emoji css 👏👏👏

Sin más, yo la tengo (bueno, cuando leas este post, «tenía») para el típico icono del menú hamburguesa, así como para los distintos items del menú.

Algunas capturas de pantallas, para que no se pierda en el olvido

Ahora que está muy de moda el uso de Notion.so, me han comentado más de un amigo que está muy chulo el menú con los emojis que tiene, ya que les «recuerda a su día a día» con Whatsapp y demás aplicaciones de mensajería.

💡 Y a mí que no me gusta nada un charco, pues manos a la obra, y me he puesto a cambiar el menú a «modo emoji».

La solución más sencilla, es copias y pegas el emoji correspondiente en el texto del item del menú, y listo. Puedes coger los emojis por ejemplo de la emojipedia.

Valer vale, pero no tenemos el potencial de colocarlos tan libremente como nos da fontawesome mediante clases css, así que tras buscar me encontré con este maravilloso proyecto: emoji.css que encima está disponible en github con licencia MIT !! El muchacho se merece una cerveza, no digo más 🍺🍺🍺

Tan sencillo como importar la librería:

<link rel='stylesheet' href='https://unpkg.com/emoji.css/dist/emoji.min.css'>

Y ya podemos usar sus clases. Como ejemplo el menú hamburguesa, que pasamos de usar:

<i class="fa fa-bars" aria-hidden="true"></i>

a usar:

<span class='ec ec-hamburger'></span>

¿Y cómo ha quedado mi nuevo menú? 🥁🥁🥁

(Este menú hamburguesa me parece muy atrevido incluso para mi, así que como no sé cuanto durará, mejor he puesto captura del menú interior, con el que estoy in love 🥰)