HTML & CSS

AtoZ CSS Quick Tip: How to Use Unicode Characters

Guy Routledge
Share

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.

U1_b-01

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.