Rogie's Blog

'➜'.charCodeAt(0).toString(16);
//outputs '279c' (in a browser console)

Find a glyph’s CSS 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, but you’d like to use the standard unicode for that character:

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

First, use a browser console and run the aforementioned snippet. The output for the arrow glyph using Firebug (my console of choice) is: 279c. I’ll simply insert that unicode into the CSS like so:

a.next{
	... //styles for this link
}
a.next:after{
	content: "\279c"; /*Hexadecimal unicode from the javascript snippet
}

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.