This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for unicode-range and @font-face here.
Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips on using unicode characters.
U is for Unicode Characters
Unicode characters can be really handy for adding little symbols and icons to your HTML or in your CSS via pseudo elements’ content property. Here are a handful of tips for using unicode characters.
Set the character set in your CSS
If you want to use unicode characters in your CSS file, ensure you set the character set for your CSS in addition to setting the charset meta tag in your HTML document.
<!-- in your HTML <head> -->
<meta charset= "utf-8"/>/* in your CSS at the top of the file*/
@charset 'utf-8';Use the Trigram for Heaven symbol as a simple hamburger icon
When needing to knock together a quick demo site or a video screencast for a responsive tutorial, I often use the love-it-or-hate-it hamburger icon for a mobile menu. There are lots of icon solutions out there and there are many non-raster approaches to the hamburger icon but often the quickest and easiest for me is to use the unicode character called “The Trigram for Heaven” which looks like this: ☰.
It looks just like a hamburger icon. And here’s how I’d often add it to my nav:
<nav class="site-nav">
<ul class="site-nav-menu">
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
<li><a href= "#">lorem ipsum</a></li>
</ul>
<a href="#" class="site-nav-icon">☰</a>
</nav>Search for and quickly copy and paste unicode characters
I came across the hamburger character whilst searching through the library of available unicode characters at copypastecharacter.com.
They have a whole load of arrows, graphical shapes, mathematical symbols, punctuation and some weird and wonderful one-off characters for you to search through and easily copy and paste into your code. Pretty handy stuff.
Frequently Asked Questions (FAQs) about Unicode in CSS
What is Unicode and why is it important in CSS?
Unicode is a universal character encoding standard that provides a unique number for every character across various platforms and programs. It’s crucial in CSS because it allows developers to use a wide range of symbols and characters from different languages in their web designs. This ensures that the content is displayed correctly regardless of the language or region of the user.
How can I use Unicode characters in CSS?
Unicode characters can be used in CSS by using the ‘content’ property along with the Unicode of the character. The Unicode should be preceded by a backslash (). For example, to add a copyright symbol, you would use content: "\00A9";.
Can I use Unicode characters in CSS selectors?
Yes, Unicode characters can be used in CSS selectors. However, they must be escaped with a backslash () and the hexadecimal Unicode value. For example, to select an element with an id of “café”, you would use #caf\00E9.
Why are some Unicode characters not displaying correctly?
If Unicode characters are not displaying correctly, it could be due to the character encoding of the HTML document. Ensure that your document is using UTF-8 encoding, which supports all Unicode characters. You can specify this in the meta tag of your HTML document like so: <meta charset="UTF-8">.
How can I find the Unicode of a character?
You can find the Unicode of a character by using online Unicode tables or character maps on your computer. These resources provide the hexadecimal value of each character, which you can use in your CSS.
Can I use Unicode in CSS animations?
Yes, Unicode characters can be used in CSS animations. You can animate the ‘content’ property to change the Unicode character over time, creating interesting visual effects.
Are there any limitations to using Unicode in CSS?
While Unicode greatly expands the range of characters available for use in CSS, it’s important to note that not all browsers or devices may support all Unicode characters. Always test your designs across different platforms to ensure compatibility.
Can I use Unicode in CSS pseudo-elements?
Yes, Unicode characters are often used in CSS pseudo-elements. For example, they can be used to add decorative elements or icons to content.
How can I use special symbols using Unicode in CSS?
Special symbols can be added using the ‘content’ property along with the Unicode of the symbol. For example, to add a heart symbol, you would use content: "\2665";.
Can I use Unicode characters in CSS fonts?
Yes, Unicode characters can be used in CSS fonts. However, the font must support the specific Unicode character for it to display correctly. If the font does not support the character, a fallback font that does support the character will be used instead.
Guy RoutledgeFront-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.
