CSS: Glyph Unicode

I find myself in situations where I'm using CSS generated content to add a glyph to a tag using :after to add more meaning, say a check mark for a list of features, or an arrow to a next link. Most times, I'll find a glyph using Jesse Gardner's fantastic SymbolAssist or by simply pressing Command-Option-T ⌘⌥T on my Mac to pull up the characters palette.

Ok, now enter the scenario. Imagine you've got some CSS like so, only you'd like to use the standard unicode for the arrow character:

a.next{
    ... //styles for this link
}
a.next:after{
    content: "➜";
}

First, use a browser console and run the following snippet:

'➜'.charCodeAt(0).toString(16);//outputs '279c'

The hexadecimal output for the arrow glyph using Chrome's console (my console of choice) is: 279c. I'll simply insert that unicode into the CSS content, with a backslash before it, like so:

a.next{
    ... //styles for this link
}
a.next:after{
    content: "\279c"; //Hexadecimal unicode output
}

If you'd like to find the unicode for any other character, simply swap the character you want for the arrow above, like so:

'⌘'.charCodeAt(0).toString(16);
//outputs '2318' (in a browser console)

That's it. Now you've taken a character and converted it to unicode. Easy peezy. Here's a bookmarklet so you never have to use your console.

Convert to Unicode

css unicode javascript