Twemoji Awesome se définit comme l'équivalent de Font Awesome, la fonticon la plus utilisée au monde, mais pour les emojis.

Développée par Elle Kasai, cette collection n'est pas basée sur une police de caractères au sens habituel mais appelle des fichiers svg en background-image (attention, certains navigateurs peuvent ne pas le gérer). Indispensable pour avoir les couleurs !

Exemple

.twa-heart {
background-image: url("https://twemoji.maxcdn.com/2/svg/2764.svg"); }

Comment l'utiliser

Rendez-vous sur la page Github du projet pour télécharger le fichier nécessaire.

Ensuite, appelez la CSS que vous venez de télécharger dans la page où vous voulez l'utiliser (dans cet exemple, on a placé la CSS dans un répertoire css/ du site)

<link href="css/twemoji-awesome.css" rel="stylesheet" type="text/css" />

Ensuite, associez la classe voulue, exactement comme vous l'auriez fait avec FontAwesome, à une balise (en général <i>). Surtout ne pas oublier la classe .twa !

<i class="twa twa-smile-cat"></i>

Il est également possible de changer la taille des icônes affichées grâce aux classes twa-lg, twa-2x, twa-3x, twa-4x et twa-5x.

<i class="twa twa-2x twa-hatching-chick"></i>
<i class="twa twa-lg twa-sparkles"></i>

Cheatsheet

Pour l'utiliser, vous allez avoir besoin d'une cheatsheet. Mais il n'en existe pas pour Twemoji (et il n'y en aura sans doute jamais car Elle Kasai n'a plus le temps mettre à jour le projet) : le concepteur renvoie vers cette cheatsheet de codes générique (lien alternatif).

Il va vous falloir bricoler : pour obtenir le nom de la classe à utiliser, vous devez supprimer les :, remplacer les underscores par des tirets et préfixer avec twa-.

Par exemple, :stuck_out_tongue: devient twa-stuck-out-tongue…  :

<i class="twa twa-stuck-out-tongue"></i>

Vous trouvez cela un peu trop compliqué ? Vous aimeriez avoir l'aperçu réel des emojis obtenus ? Je vous ai développé une cheatsheet basée sur la CSS de Twemoji. Par contre, les icônes sont dans l'ordre dans lequel les classes apparaissant dans la CSS…

Et sous WordPress ?

Comment l'utiliser sous WordPress ? Impossible, car le CMS supprime les balises sans contenu ! Même en mettant un espace entre les balises, pas moyen. Heureusement, Worpdress possède sa propre gestion des emojis depuis la version 4.2 (il y en a même qui l'accusent de ralentir le chargement des pages et vous expliquent comment le désactiver)… Il vous suffit d'effectuer un copier-coller à partir d'une base d'emojis, comme celle de Twitter ou d'un site tel que celui-ci.

Une alternative

Et si vous voulez vraiment coller au concept de fonticon, jetez un œil du côté de l'EmojiSymbols Font de Kenichi Kaneko. C'est, cette fois-ci, une vraie police de caractères. Mais les emojis seront (forcément) monochromes.