{"id":28771,"date":"2016-12-21T21:01:32","date_gmt":"2016-12-21T13:01:32","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28771"},"modified":"2018-04-09T16:56:36","modified_gmt":"2018-04-09T08:56:36","slug":"emoji-css","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/","title":{"rendered":"Add Emoji Support To Your Website With Emoji CSS"},"content":{"rendered":"<p>Emojis have taken over digital conversations and these cute little icons quickly permeated <a href=\"https:\/\/www.hongkiat.com\/blog\/clever-funny-emoji\/\">Internet culture<\/a> with a bang. They\u2019re now an everyday part of our lives and you can find them everywhere from desktop apps to <a target=\"_blank\" href=\"https:\/\/codex.wordpress.org\/Emoji\">WordPress<\/a>.<\/p>\n<p>And if you\u2019ve ever wanted <strong>custom emojis<\/strong> on your site then <a target=\"_blank\" href=\"https:\/\/afeld.github.io\/emoji-css\/\">Emoji CSS<\/a> is the perfect library to use.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/clever-funny-emoji\/\">23 Clever and Funny Use of Emojis<\/a>\n\t\t\t\t<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/afeld.github.io\/emoji-css\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg\" alt=\"emoji css homepage\"><\/a><\/figure>\n<p>These pure CSS icons are <strong>generated with background images<\/strong> so <strong>each emoji has its own PNG file<\/strong>. These image files are <strong>retina-ready<\/strong> so they look great on all monitors.<\/p>\n<p>You can also demo these emojis by <strong>including the <a target=\"_blank\" href=\"https:\/\/afeld.github.io\/emoji-css\/emoji.css\">raw CSS file<\/a> into your site.<\/strong> The file references self-hosted images on GitHub so <strong>you don\u2019t need to host anything locally<\/strong> to get started.<\/p>\n<p>On the Emoji CSS homepage you\u2019ll find all the <strong>image code classes along with a sample demo snippet<\/strong>. Once you\u2019ve added the Emoji CSS file to your document all you have to do is add an <strong>&lt;i&gt;<\/strong> element with the <strong>.em<\/strong> class, along with whatever class relates to the specific icon you want to show.<\/p>\n<p>So for example this code:<\/p>\n<pre>&lt;i class=\"em em-100\"&gt;&lt;\/i&gt;<\/pre>\n<p>will add the 100 emoji directly into your site\u2019s content. You have well <strong>over 200 different emojis to choose from<\/strong> and the project is <strong>open source<\/strong> so it\u2019s <strong>available for updates<\/strong>.<\/p>\n<figure><a target=\"_blank\" href=\"https:\/\/afeld.github.io\/emoji-css\/\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/02-emoji-css-copied-message.jpg\" alt=\"emoji css library\"><\/a><\/figure>\n<p>Best of all the Emoji CSS homepage is super easy to use. Just <strong>click on an icon<\/strong> and you\u2019ll <strong>automatically copy that source code<\/strong> into the clipboard so you can paste it right into your HTML.<\/p>\n<p>I\u2019ll be the first to admit that not every website will benefit from this Emoji library but <strong>social networks <\/strong>and<strong> comment-supported websites can improve user engagement by adding emoji support<\/strong>. And with the <a target=\"_blank\" href=\"https:\/\/afeld.github.io\/emoji-css\/\">Emoji CSS library<\/a>, this is practically a two-step process to emoji-up your site.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/emoticon-in-email-subject\/\">How to Use Emoticons in Email Subject Line<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>Emojis have taken over digital conversations and these cute little icons quickly permeated Internet culture with a bang. They\u2019re now an everyday part of our lives and you can find them everywhere from desktop apps to WordPress. And if you\u2019ve ever wanted custom emojis on your site then Emoji CSS is the perfect library to&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Add Emoji Support To Your Website With Emoji CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Emojis have taken over digital conversations and these cute little icons quickly permeated Internet culture with a bang. They&#039;re now an everyday part of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/emoji-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Emoji Support To Your Website With Emoji CSS\" \/>\n<meta property=\"og:description\" content=\"Emojis have taken over digital conversations and these cute little icons quickly permeated Internet culture with a bang. They&#039;re now an everyday part of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/emoji-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-21T13:01:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:56:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Add Emoji Support To Your Website With Emoji CSS\",\"datePublished\":\"2016-12-21T13:01:32+00:00\",\"dateModified\":\"2018-04-09T08:56:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/\"},\"wordCount\":315,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/emoji-css\\\/01-emojis-css-homepage.jpg\",\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/\",\"name\":\"Add Emoji Support To Your Website With Emoji CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/emoji-css\\\/01-emojis-css-homepage.jpg\",\"datePublished\":\"2016-12-21T13:01:32+00:00\",\"dateModified\":\"2018-04-09T08:56:36+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/emoji-css\\\/01-emojis-css-homepage.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/emoji-css\\\/01-emojis-css-homepage.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/emoji-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Emoji Support To Your Website With Emoji CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add Emoji Support To Your Website With Emoji CSS - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/","og_locale":"en_US","og_type":"article","og_title":"Add Emoji Support To Your Website With Emoji CSS","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-12-21T13:01:32+00:00","article_modified_time":"2018-04-09T08:56:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Add Emoji Support To Your Website With Emoji CSS","datePublished":"2016-12-21T13:01:32+00:00","dateModified":"2018-04-09T08:56:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/"},"wordCount":315,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg","keywords":["CSS","CSS Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/emoji-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/","url":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/","name":"Add Emoji Support To Your Website With Emoji CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg","datePublished":"2016-12-21T13:01:32+00:00","dateModified":"2018-04-09T08:56:36+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/emoji-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/emoji-css\/01-emojis-css-homepage.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/emoji-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add Emoji Support To Your Website With Emoji CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7u3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=28771"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28771\/revisions"}],"predecessor-version":[{"id":41675,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/28771\/revisions\/41675"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=28771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=28771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=28771"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=28771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}