Search code examples
cssunicodewebfonts

The correct way to assign unicode values to webfonts via CSS?

I am converting some custom icons to web fonts (for internal use only) and I was able to use a local client tool to export to the various font formats (woff, eot, ttf, svg) needed for each icon.

I am using the character map utility in Windows to see the Unicode value for each icon. For example, an airplane icon I have has a unicode value of: U+0021 (Exclamation Mark).

So, now, in my CSS file, I am using code like so:

.myIcon-airplane:before {
    content: "!"
}

This outputs an airplane icon as expected.

However, is there a way to use the unicode value (ie, U+0021) instead of the exclamation mark? Or, what's the correct way for me to map my icons using the CSS content key?

Unfortunately, I can't use a public tool due to the proprietary nature of these icons.

Solution

  • Use the backslash escape character followed by the unicode value, like so:

    .myIcon-airplane::before{
    content:"\0021";
}
    <p class="myIcon-airplane"></p>