Add Emoji Support To Your Website With Emoji CSS

By Jake Rocheleau. in Web Design. Updated on April 9, 2018.

Emojis have taken over digital conversations and these cute little icons quickly permeated Internet culture with a bang. They’re now an everyday part of our lives and you can find them everywhere from desktop apps to WordPress.

And if you’ve ever wanted custom emojis on your site then Emoji CSS is the perfect library to use.

Read Also: 23 Clever and Funny Use of Emojis

These pure CSS icons are generated with background images so each emoji has its own PNG file. These image files are retina-ready so they look great on all monitors.

You can also demo these emojis by including the raw CSS file into your site. The file references self-hosted images on GitHub so you don’t need to host anything locally to get started.

On the Emoji CSS homepage you’ll find all the image code classes along with a sample demo snippet. Once you’ve added the Emoji CSS file to your document all you have to do is add an <i> element with the .em class, along with whatever class relates to the specific icon you want to show.

So for example this code:

<i class="em em-100"></i>

will add the 100 emoji directly into your site’s content. You have well over 200 different emojis to choose from and the project is open source so it’s available for updates.

Best of all the Emoji CSS homepage is super easy to use. Just click on an icon and you’ll automatically copy that source code into the clipboard so you can paste it right into your HTML.

I’ll be the first to admit that not every website will benefit from this Emoji library but social networks and comment-supported websites can improve user engagement by adding emoji support. And with the Emoji CSS library, this is practically a two-step process to emoji-up your site.