Unicode Characters in HTML & CSS

One of the best things I learned when staring out in front-end development was Unicode characters. For those who don’t know what they are, Unicode is a simple and quick way to insert basic characters directly into your web page. It doesn’t require external requests and cuts down on load time. Another benefit is that it is a font, not an image, so when people manually adjust their screen size, the Unicode will adjust as well.
Unicode can be used in both your HTML and CSS in two slightly different ways:
In your HTML you would use the HTML code:

The key with the HTML code is to always include the & and # at the beginning of the number and the ; at the end.
The code above will render an arrow on the page:

The alternate way to insert unicode characters into your web page is to use it in your CSS files. This is done using pseudo elements like ::before and ::after.
The benefit of using Unicode in your CSS is that it can be styled independently.
The mark-up for this looks like this:

When using unicode in CSS do not use the HTML code, but instead use the Unicode number. The Unicode sun in the example above has the Unicode number: U+263C. However, when inserting it into your CSS do not include the U or + at the beginning of the number. Instead, replace those two characters with \.
The above code will render on your page like this:

As great as Unicode is there are limitations:
1.The first limitation is a BIG one. When it comes to accessibility, not all screen readers will read out Unicode. Keep in mind that if you are relying solely on Unicode to convey something to your user, that portion of your website may not be accessible to everyone.
2. If a user has their default font changed on their web browser, then unicode may not be able to render in that specific font library. That would cause your character to render like this:

3. Different companies have default emoji’s included in their libraries, which can cause your characters to render differently than you expected. For example the Unicode U+1F60B may originally render as this:

But it will render differently in different places:

A great website to use to pick your characters is unicode-table.com. When you select the character you’d like to use there are graphics on the page. These graphics tell you how your character of choice is going to render in different places and in different fonts.
Despite these limitations, Unicode is a easy way to add simple but useful content to your page. Unicode is a great way to add some extra styling and flare to your page!
