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.

No, I don't think so. It is only the OS's problem that there is no such font, then the browser displays a holder character. There should not be a error event going on, thus it should be undetectable. — Daniel Cheung
– Daniel Cheung, Commented Mar 13, 2014 at 14:02

SW4 · Accepted Answer · 2014-03-13 14:06:20Z

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 .

Collectives™ on Stack Overflow

Fallback for using unicode with css

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related