Using Emojis in HTML, CSS, and JavaScript

by kirupa | 7 February 2018

From its humble beginnings in 1999, Emojis are all the rage these days. It's no longer something that only people half our age use to communicate. You and I use them all the time, and almost every chat or messaging-related app under the sun provides great support for it:


This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/emoji.htm

¯\_(ツ)_/¯

( ^_^)o自自o(^_^ )

Fun Article K-man.

1 Like

Thank you. Very cool. :mage:

1 Like

:joy:

1 Like

¯\_(ツ)_/¯

1 Like

I was looking through some Google Search Console data, and this article is the most popular one that people land on from searching for emoji-related developer questions :cup_with_straw:

It’s funny how the easiest to write articles get the most traction sometimes :stuck_out_tongue:

To copy emoji codes more easily, you can use https://emojigraph.org/ - there are HTML hex, CSS, JS, Perl, and other versions in a table at the bottom of each emoji. For :cat2: Cat emoji for example:

URL escape code %F0%9F%90%88
Punycode xn–zn8h
Bytes (UTF-8) F0 9F 90 88
JavaScript, JSON, Java \uD83D\uDC08
C, C++, Python \U0001f408
CSS \01F408
PHP, Ruby \u{1F408}
Perl \x{1F408}
1 Like

Thanks for sharing that! I didn’t know about this resource, and I always end up fiddling around for a bit with the OS emoji picker or going to emojipedia to do a copy/paste :grinning:

1 Like

Thank you it’s cool

It’s cool mate.

How to make emojis appear in microsoft style only like with black borders

The emojis are always system specific. Those emojis will only appear on a Microsoft OS that has that style of emojis built-in to it. If you really need those style of visuals, you need to use actual images instead. I don’t know if Microsoft provides those emojis for use standalone.