Fallback for using unicode with css

Question

I was wondering if you could create a fallback when using unicode characters. See I got following css:

.icon-check:after {
    content:'\2714';
    color: green;
}

and one would have no support for this character, is there a way to just print 'yes' or something?

For fonts there it's easy , just like p{font-family:"Times New Roman", Times, serif;}. But for the content attribute, there seems no way to create such a fallback.

N.B. I know there other possibilities like Font Awesome, Glyphicons and similar but I am just interested if there is a fallback.

Answer 1

is there a way to just print 'yes' or something?

Simple answer? No.

I was wondering if you could create a fallback when using unicode characters

Simple answer? Yes...ish.

The only fallback you can specify is on the font family, however you can use @fontface to specify the unicode range of the font you're using.

The unicode-range CSS descriptor sets the specific range of characters to be downloaded from a font defined by @font-face and made available for use on the current page.

There is a great article on 24 Ways which outlines how this can be done, you could for example, specify a font-family just for the character in question e.g.(from the article):

@font-face {
    font-family: 'Ampersand';
    src: local('Baskerville'), local('Palatino'), local('Book Antiqua');
    unicode-range: U+26;
}

Then do:

.icon-check:after {
    content:'\26';
    color: green;
}

Nb. the above is for an ampersand but should give you an idea of one approach .