Emojis & Icons

by Erfan Paslar

Posted on: 2021-03-01

Emojis & Icons





For adding icons like:


they are not images they are Icon.

so, for adding those, you should do as following:

  1. open an HTML snippet
  2. find an icon from fontawesome (VPN for us (╯ ಥ ︹ ಥ )╯┻━┻ )
  3. past the i tag there
  4. style it

for example, we found the basketball icon from Fontawseme and it's <i class="fad fa-basketball-ball"></i> . (make sure you use fad not fas or far or fal )


the HEX value of orange is #e17e14 (you could use the RGB value too rgb(252, 126, 20) or even you can use orange )

and the HEX value of black is #000.


then you should add style to the icon

<i class="fad fa-basketball-ball" style=""></i>

inside the style="" we should specify 3 things:

  1. --fa-primary-color that is black or #000
  2. --fa-secondary-color that is orange or #e17e14
  3. --fa-secondary-opacity better be 1.0

<i class="fad fa-basketball-ball" style="--fa-primary-color: #000; --fa-secondary-color: #e17e14;"></i>

the result will be


that's a little bit tiny! so, for bigger icons, you can add fa-2x or fa-3x … to  the class (not style) section

<i class="fad fa-basketball-ball fa-4x" style="--fa-primary-color: #000; --fa-secondary-color: #e17e14; --fa-secondary-opacity: 1.0;"></i>



You can add regular emojis like 😂 😐 😶 💩 (in windows use WIN+'.')

or emojis like ( ͡❛ ͜ʖ ͡❛) or ( ͡° ͜ʖ ͡°( ͡❛ ͜ʖ ͡❛) ͡° ͜ʖ ͡°) or even ( ͡°( ͡° ͜ʖ ͡°( ͡❛ ͜ʖ ͡❛) ͡° ͜ʖ ͡°) ͡°)  (you can find more on fsymbols.com)

or these

So, for adding these emojis you should simply, copy the text in front of the emoji you want and go to the editor, and open an HTML snippet

Then if you paste it there and publish your post the emoji will appear on the NEXT line !!

Let's see how can we add it to the CURRENT line:

for example, we want to add a smiley emoji at the end of the line “Hi this is a smiley emoji” :

  1. open an HTML snippet
  2. open and close a p tag like this:
  3. write the line inside the p tag
  4. then copy and paste the text in front of the emoji after the line (see below)

<p>Hi this is a smiley emoji <i class="emoji fad fa-smile"></i> </p>

And the result will be:

Hi this is a smiley emoji


For bigger emojis, you should add another class to the i tag. for example if you add fa-2x

<p>Hi this is a smiley emoji 2X <i class="emoji fad fa-smile fa-2x"></i> </p>

The the result will be:

Hi this is a smiley emoji 2X

You can find some emojies on fontawesome.com 

and also don't forget to add style="color:var(--note);"  for first three in the i tag for color!

and the class emoji for the last one.


List of some emojis:

<i style="color:var(--note);" class="fas fa-smile"></i>
<i style="color:var(--note);" class="far fa-smile"></i>
<i style="color:var(--note);" class="fal fa-smile"></i>
<i class="emoji fad fa-smile"></i>

<i style="color:var(--note);" class="fas fa-meh"></i>
<i style="color:var(--note);" class="far fa-meh"></i>
<i style="color:var(--note);" class="fal fa-meh"></i>
<i class="emoji fad fa-meh"></i>

<i style="color:var(--note);" class="fas fa-frown"></i>
<i style="color:var(--note);" class="far fa-frown"></i>
<i style="color:var(--note);" class="fal fa-frown"></i>
<i class="emoji fad fa-frown"></i>

<i style="color:var(--note);" class="fas fa-angry"></i>
<i style="color:var(--note);" class="far fa-angry"></i>
<i style="color:var(--note);" class="fal fa-angry"></i>
<i class="emoji fad fa-angry"></i>

<i style="color:var(--note);" class="fas fa-dizzy"></i>
<i style="color:var(--note);" class="far fa-dizzy"></i>
<i style="color:var(--note);" class="fal fa-dizzy"></i>
<i class="emoji fad fa-dizzy"></i>

<i style="color:var(--note);" class="fas fa-flushed"></i>
<i style="color:var(--note);" class="far fa-flushed"></i>
<i style="color:var(--note);" class="fal fa-flushed"></i>
<i class="emoji fad fa-flushed"></i>

<i style="color:var(--note);" class="fas fa-frown-open"></i>
<i style="color:var(--note);" class="far fa-frown-open"></i>
<i style="color:var(--note);" class="fal fa-frown-open"></i>
<i class="emoji fad fa-frown-open"></i>

<i style="color:var(--note);" class="fas fa-grimace"></i>
<i style="color:var(--note);" class="far fa-grimace"></i>
<i style="color:var(--note);" class="fal fa-grimace"></i>
<i class="emoji fad fa-grimace"></i>

<i style="color:var(--note);" class="fas fa-grin"></i>
<i style="color:var(--note);" class="far fa-grin"></i>
<i style="color:var(--note);" class="fal fa-grin"></i>
<i class="emoji fad fa-grin"></i>

<i style="color:var(--note);" class="fas fa-grin-alt"></i>
<i style="color:var(--note);" class="far fa-grin-alt"></i>
<i style="color:var(--note);" class="fal fa-grin-alt"></i>
<i class="emoji fad fa-grin-alt"></i>

<i style="color:var(--note);" class="fas fa-grin-beam"></i>
<i style="color:var(--note);" class="fal fa-grin-beam"></i>
<i style="color:var(--note);" class="far fa-grin-beam"></i>
<i class="emoji fad fa-grin-beam"></i>

<i style="color:var(--note);" class="fas fa-grin-beam-sweat"></i>
<i style="color:var(--note);" class="far fa-grin-beam-sweat"></i>
<i style="color:var(--note);" class="fal fa-grin-beam-sweat"></i>
<i class="emoji fad fa-grin-beam-sweat"></i>

<i style="color:var(--note);" class="fas fa-grin-hearts"></i>
<i style="color:var(--note);" class="far fa-grin-hearts"></i>
<i style="color:var(--note);" class="fal fa-grin-hearts"></i>
<i class="emoji fad fa-grin-hearts"></i>

<i style="color:var(--note);" class="fas fa-grin-squint"></i>
<i style="color:var(--note);" class="far fa-grin-squint"></i>
<i style="color:var(--note);" class="fal fa-grin-squint"></i>
<i class="emoji fad fa-grin-squint"></i>

<i style="color:var(--note);" class="fas fa-grin-squint-tears"></i>
<i style="color:var(--note);" class="far fa-grin-squint-tears"></i>
<i style="color:var(--note);" class="fal fa-grin-squint-tears"></i>
<i class="emoji fad fa-grin-squint-tears"></i>

<i style="color:var(--note);" class="fas fa-grin-stars"></i>
<i style="color:var(--note);" class="far fa-grin-stars"></i>
<i style="color:var(--note);" class="fal fa-grin-stars"></i>
<i class="emoji fad fa-grin-stars"></i>

<i style="color:var(--note);" class="fas fa-grin-tears"></i>
<i style="color:var(--note);" class="far fa-grin-tears"></i>
<i style="color:var(--note);" class="fal fa-grin-tears"></i>
<i class="emoji fad fa-grin-tears"></i>

<i style="color:var(--note);" class="fas fa-grin-tongue"></i>
<i style="color:var(--note);" class="far fa-grin-tongue"></i>
<i style="color:var(--note);" class="fal fa-grin-tongue"></i>
<i class="emoji fad fa-grin-tongue"></i>

<i style="color:var(--note);" class="fas fa-grin-tongue-squint"></i>
<i style="color:var(--note);" class="far fa-grin-tongue-squint"></i>
<i style="color:var(--note);" class="fal fa-grin-tongue-squint"></i>
<i class="emoji fad fa-grin-tongue-squint"></i>

<i style="color:var(--note);" class="fas fa-grin-tongue-wink"></i>
<i style="color:var(--note);" class="far fa-grin-tongue-wink"></i>
<i style="color:var(--note);" class="fal fa-grin-tongue-wink"></i>
<i class="emoji fad fa-grin-tongue-wink"></i>

<i style="color:var(--note);" class="fas fa-grin-wink"></i>
<i style="color:var(--note);" class="far fa-grin-wink"></i>
<i style="color:var(--note);" class="fal fa-grin-wink"></i>
<i class="emoji fad fa-grin-wink"></i>

<i style="color:var(--note);" class="fas fa-kiss"></i>
<i style="color:var(--note);" class="far fa-kiss"></i>
<i style="color:var(--note);" class="fal fa-kiss"></i>
<i class="emoji fad fa-kiss"></i>

<i style="color:var(--note);" class="fas fa-kiss-beam"></i>
<i style="color:var(--note);" class="far fa-kiss-beam"></i>
<i style="color:var(--note);" class="fal fa-kiss-beam"></i>
<i class="emoji fad fa-kiss-beam"></i>

<i style="color:var(--note);" class="fas fa-kiss-wink-heart"></i>
<i style="color:var(--note);" class="far fa-kiss-wink-heart"></i>
<i style="color:var(--note);" class="fal fa-kiss-wink-heart"></i>
<i class="emoji fad fa-kiss-wink-heart"></i>

<i style="color:var(--note);" class="fas fa-laugh"></i>
<i style="color:var(--note);" class="far fa-laugh"></i>
<i style="color:var(--note);" class="fal fa-laugh"></i>
<i class="emoji fad fa-laugh"></i>

<i style="color:var(--note);" class="fas fa-laugh-beam"></i>
<i style="color:var(--note);" class="far fa-laugh-beam"></i>
<i style="color:var(--note);" class="fal fa-laugh-beam"></i>
<i class="emoji fad fa-laugh-beam"></i>

<i style="color:var(--note);" class="fas fa-laugh-squint"></i>
<i style="color:var(--note);" class="far fa-laugh-squint"></i>
<i style="color:var(--note);" class="fal fa-laugh-squint"></i>
<i class="emoji fad fa-laugh-squint"></i>

<i style="color:var(--note);" class="fas fa-laugh-wink"></i>
<i style="color:var(--note);" class="far fa-laugh-wink"></i>
<i style="color:var(--note);" class="fal fa-laugh-wink"></i>
<i class="emoji fad fa-laugh-wink"></i>

<i style="color:var(--note);" class="fas fa-meh-blank"></i>
<i style="color:var(--note);" class="far fa-meh-blank"></i>
<i style="color:var(--note);" class="fal fa-meh-blank"></i>
<i class="emoji fad fa-meh-blank"></i>

<i style="color:var(--note);" class="fas fa-meh-rolling-eyes"></i>
<i style="color:var(--note);" class="far fa-meh-rolling-eyes"></i>
<i style="color:var(--note);" class="fal fa-meh-rolling-eyes"></i>
<i class="emoji fad fa-meh-rolling-eyes"></i>

<i style="color:var(--note);" class="fas fa-sad-cry"></i>
<i style="color:var(--note);" class="far fa-sad-cry"></i>
<i style="color:var(--note);" class="fal fa-sad-cry"></i>
<i class="emoji fad fa-sad-cry"></i>

<i style="color:var(--note);" class="fas fa-sad-tear"></i>
<i style="color:var(--note);" class="far fa-sad-tear"></i>
<i style="color:var(--note);" class="fal fa-sad-tear"></i>
<i class="emoji fad fa-sad-tear"></i>

<i style="color:var(--note);" class="fas fa-smile-beam"></i>
<i style="color:var(--note);" class="far fa-smile-beam"></i>
<i style="color:var(--note);" class="fal fa-smile-beam"></i>
<i class="emoji fad fa-smile-beam"></i>

<i style="color:var(--note);" class="fas fa-smile-wink"></i>
<i style="color:var(--note);" class="far fa-smile-wink"></i>
<i style="color:var(--note);" class="fal fa-smile-wink"></i>
<i class="emoji fad fa-smile-wink"></i>

<i style="color:var(--note);" class="fas fa-surprise"></i>
<i style="color:var(--note);" class="far fa-surprise"></i>
<i style="color:var(--note);" class="fal fa-surprise"></i>
<i class="emoji fad fa-surprise"></i>

<i style="color:var(--note);" class="fas fa-tired"></i>
<i style="color:var(--note);" class="far fa-tired"></i>
<i style="color:var(--note);" class="fal fa-tired"></i>
<i class="emoji fad fa-tired"></i>



Leave a Comment: