4

I was trying to use the 'ELECTRIC LIGHT BULB (U+1F4A1)' unicode on my site. Every platform shows the unicode different, even though I specify Symbola font on the font-family on the body tag (all characters use this font except for unicodes).

Linux: Symbola font
Windows: Segio UI font
Android: emoji

Now this might not look like a problem because every platform shows the right icon. It is a problem when you try to change the color, which is something I expect from a character, does not work with emoji.

Also the characters showing different on every platform in general is kind of annoying.

How can I use unicodes effectively, avoiding differences across platforms?

  • It's not "a unicode", it's "a Unicode character". The Unicode character U+1F4A1 is in Unicode since October 2010, according to this page, so you can't expect it to be widely supported. – Walter Tross Nov 16 '15 at 21:32
  • @WalterTross when I link to Symbola font, which supports U+1F4A1, inside a project, I expect all platforms to make use of this font and not use Segio UI (which does have the character) on Windows or emojis on Android. – oddRaven Nov 17 '15 at 12:24
  • Just to clarify, are you using @font-face to download the Symbola font to the client? – MrWhite Nov 17 '15 at 12:50
  • 1
    @w3d Yes, the font is locally available inside the project. All characters work except for the unicodes. – oddRaven Nov 19 '15 at 11:11
1

The only way to make an unicode icon display across browsers consistently is by loading the icon's default webfont. For example, the electric light bulb unicode character uses the Symbola font. If that isn't installed on the device, the device will then use the fall-back of the fonts you listed.

For a cross-platform solution, you'll need to use font icons like Font Awesome. It's also pretty easy to create your own font icons with Icomoon. That or you'll need to load each icons webfont which isn't at all practical.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.