Search code examples
twitter-bootstrapfont-awesomecdn

Get an unicode, not an icon Font Awesome

enter image description here

For some reason, get an unicode, but I would want, of course, get an icon. And in case of exclamation it works properly, but in case trash icon it doesn't. What's the reason of this action? I use bootstrap cdn for it.

Solution

  • For some reason, you are missing the fontawesome font itself from your environment.

    Checking their website for the font awesome trashcan we can see that they customly disignated the trashcan as codepoint U+F1F8 (instead of using the trashcan emoji 🗑 U+1F5D1).

    If we check for more of their icons we can see that they are mostly in the range of the Private Use Area (U+E000–U+F8FF) in the Basic Multilingual Plane. By definition, no characters are assigned to these codepoints.

    This is where font files come in. Font files store glyphs (images) of how to show codepoints. If you define a glyph to a codepoint in the Private Use Area you will have a visual representation of that character. It doesn't matter that other fonts will show you a replacement character or just broken one, when you use the specific font it will work.

    So why does the exclamation mark works in any font? Look what codepoint they used for it: U+21 This is of course the codepage of the boring old ! from ASCII/Basic Latin. Any font that respect itself will have this one.

    Hope you find this read helpful 😊 There are probably lots of ways to include the font in your webpage/machine according to your needs.