How To Use Emojis in Your HTML Pages
Its 2018 and emojis are more essential than ever, so why should you limit their use to just texting or social apps?
Here's how to add emojis directly into your html pages:
The first thing you need to do is to make sure you declare UTF-8
inside a <meta>
tag at the beginning of your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
Next you need to find the unicode for the emoji that you would like to use. Unicode.org has a great list for reference 😉. Here's an example of what to look for:
The unicode for 😁 = U+1F601
If you plugged the emoji unicode directly into your code editor, you will notice that your browser still doesn't know quite what to do with it:
<p>So excited to see you U+1F601</p>
Your browser will print:
To fix this we must change the code a bit so that the browser can read the code correctly.
Replace the U+
at the beginning of the unicode with &#x
then add the ;
at the end of it all like so:
😁
Boom!
That's it! All it took was a few, quick steps to turn the unicode U+1F601
into the HTML readable 😁
. Now you
know exactly how to use emojis in your next html page!
Feel free to use my html emoji code list as a reference for more fun emoji codes to use in your projects 😉.