Twemoji Awesome, une police emoji

 

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).

Liste des codes

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.

Karine SANCHE

Partager cet article