Question

I want to make a fallback for my icon font. For example, for my beautiful icon font check mark I use Unicode check mark equivalent:

.icon-checkmark {
    &:before {
        content: "\2713"; /* Unicode Character 'CHECK MARK' (U+2713) */
    }
}

My icon font has character with code "\2713" also. If my icon font fails to load, user will see Unicode check mark; if icon font loads successfully, user will see icon font's beautiful check mark.

I'm searching for Unicode character equivalents for «email», «save» and «print» entities. Are there any or similar in Unicode tables? I have searched on http://www.fileformat.info/ but with no luck.

(I have found only an «email» character — http://www.fileformat.info/info/unicode/char/1f4e7/browsertest.htm, but it does not work in Chrome 28 (it works in all other browsers however :).

Was it helpful?

Solution

Here's some ideas. I have not tested them on any browsers except Firefox on Linux.

Edit: 💾 \U0001f4be could be used for saving since Unicode 6.x

OTHER TIPS

I was also looking for save (floppy disk) symbol.
💾 symbol (mentioned in @Dark Falcon answer) is colored and not adjustable with its adjacent text colors.
I finally got 🖫 from graphemica.com
We can adjust it in any color by CSS color property.

🖫 white hard shell floppy disk for save (U+1F5AB)  
✉ print screen symbol (U+2399)
⎙ envelope for email (U+2709)

Your question is actually two-fold: which Unicode code-points are useful for your purpose, and which Unicode code-points are covered with common font installations.

And it raises a new question: why do some programs (Chrome on Windows?) not show correct glyphs where other programs can?

Regarding the first two questions: as you can see, these days some really useful symbols just don't work on many systems out of the box.

Regarding the last question: I have no idea, but some insights on Linux:

Many programs (including Chrome) end up using fontconfig via one way or another. That library is responsible to find the fonts useful to display certain "text". At a higher level, the rendering is done with a mix of fonts, because for more challenging (web page) text there will always be a situation where one font won't cover everything there to display. Might the reason be that another style is requested or a code point is not covered.

So if Chrome on Linux does not show one thing or another, install fonts which have those glyphs (in a way that integrates well with fontconfig-configuration).

I have no idea what drives font-mixing on Windows.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top