Emoticon css fonts? Quasi.

Stai cercando come includere delle emoticon via CSS come se fossero un font perché sei stufo di vedere icone come queste? 💃😕🙆 ...

Stai cercando come includere delle emoticon via CSS come se fossero un font perché sei stufo di vedere icone come queste? 💃😕🙆

Questa è la ricerca che ho fatto su google: "emoticon css fonts" e una soluzione diversa è stata quella di trovare:

https://emoji-css.afeld.me/

Ecco un esempio di icone

Sul sito c'è una lunga lista di icone disponibili, free, cioè libere ed a uso gratuito. Sempre nel sito cliccando sopra una icona mostra e copia il codice da usare, sarà sufficiente fare CTRL+V o Mela+V per copiare il codice da usare.

Ovviamente per aggiungerle al sito per prima cosa dopo <head> bisogna inserire il seguente codice

<head>
<link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">
</head>

Questo è il codice che ho usato per inserire le icone in questa pagina.

<i aria-label="WINKING FACE" aria-role="presentation" class="em em-wink"></i>
<i aria-label="SLIGHTLY SMILING FACE" aria-role="presentation" class="em em-slightly_smiling_face"></i>
<i aria-label="MAN DANCING" aria-role="presentation" class="em em-man_dancing"></i>
<i aria-label="DANCER" aria-role="presentation" class="em em-dancer"></i>
<i aria-label="HUGGING FACE" aria-role="presentation" class="em em-hugging_face"></i>
<i aria-label="SMIRKING FACE" aria-role="presentation" class="em em-smirk"></i>
<i aria-label="ENVELOPE" aria-role="presentation" class="em em-email"></i>
<i aria-label="GRINNING FACE WITH STAR EYES" aria-role="presentation" class="em em-star-struck"></i>
<i aria-label="TOP WITH UPWARDS ARROW ABOVE" aria-role="presentation" class="em em-top"></i>
<i aria-label="GLOWING STAR" aria-role="presentation" class="em em-star2"></i>
<i aria-label="WHITE HEAVY CHECK MARK" aria-role="presentation" class="em em-white_check_mark"></i>
<i aria-label="CHEERING MEGAPHONE" aria-role="presentation" class="em em-mega"></i>
<i aria-label="EARTH GLOBE EUROPE-AFRICA" aria-role="presentation" class="em em-earth_africa"></i>
<i aria-label="CLOCK FACE EIGHT OCLOCK" aria-role="presentation" class="em em-clock8"></i>
<i aria-label="CLOCK FACE NINE OCLOCK" aria-role="presentation" class="em em-clock9"></i>
<i aria-label="LINK SYMBOL" aria-role="presentation" class="em em-link"></i>
<i aria-label="SMILING FACE WITH SMILING EYES AND THREE HEARTS" aria-role="presentation" class="em em-smiling_face_with_3_hearts"></i>
<i aria-label="HEAVY BLACK HEART" aria-role="presentation" class="em em-heart"></i>
<i aria-label="THUMBS UP SIGN" aria-role="presentation" class="em em---1"></i>

Se invece stai cercando una soluzione che funzioni come se fosse un font ti consiglio di guardare questo: