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:
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 😁 =
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.
U+ at the beginning of the unicode with
&#x then add the
; at the end of it all like so:
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 😉.