3 ms·

I was actually playing with using Unicode emoji for a webpage this week. Being able to use characters as icons would be fantastically easy for a lot of use cas

by ken 14y ago

I was actually playing with using Unicode emoji for a webpage this week. Being able to use characters as icons would be fantastically easy for a lot of use cases! Unfortunately, as others have noted, it doesn't work on many platforms: Safari works on 10.7+, Firefox doesn't seem to support it at all yet [1], and I don't follow Chromium that much any more but it seems like it's not there yet, either [2]. [1]: https://bugzilla.mozilla.org/show_bug.cgi?id=715798 https://bugzilla.mozilla.org/show_bug.cgi?id=715798 [2]: http://code.google.com/p/chromium/issues/detail?id=62435 http://code.google.com/p/chromium/issues/detail?id=62435

molf 14y ago
Emoji work in most browsers. The problem is that many fonts are missing the corresponding characters. You just need to pick a good font. You'll be missing full color icons, though. Example page with an emoji character that works almost everywhere (with a web font based on Symbola): http://unicodepanda.com/ http://unicodepanda.com/
- deleted 14y ago
  [deleted]
- ken 14y ago
  I would guess that most fonts will lack emoji characters, and always will, just like most fonts won't have all umpteen-thousand hanzi/kanji. I'm no expert on HTML fonts, but I thought it was the browser's job to find and use a font which contains the character on the page. I can write Japanese text, and specify it should be "Comic Sans", and every web browser I've ever tried will pick a reasonable font to display them, rather than leaving a Comic Sans-sized blank area on the page. OS X comes with at least one font with these characters, yet apart from Safari, none of my web browsers can seem to use it. To me, that means it doesn't work.
tmarthal 14y ago
While not exactly what you are proposing, ff you want/need to use characters as icons, there is a pretty neat hack called Font Awesome (http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/). It's used to replace the twitter bootstrap icons with font files; seems to work pretty well so far (with no need to re-color individual icons... you can style the font/icons with css). Things like <div class="icon-flag" style="color:red; font-size:36px"> will create a 36point red flag character for you.

by ken 14y ago

molf 14y ago

Emoji work in most browsers. The problem is that many fonts are missing the corresponding characters. You just need to pick a good font. You'll be missing full color icons, though. Example page with an emoji character that works almost everywhere (with a web font based on Symbola): http://unicodepanda.com/ http://unicodepanda.com/

deleted 14y ago
[deleted]
ken 14y ago
I would guess that most fonts will lack emoji characters, and always will, just like most fonts won't have all umpteen-thousand hanzi/kanji. I'm no expert on HTML fonts, but I thought it was the browser's job to find and use a font which contains the character on the page. I can write Japanese text, and specify it should be "Comic Sans", and every web browser I've ever tried will pick a reasonable font to display them, rather than leaving a Comic Sans-sized blank area on the page. OS X comes with at least one font with these characters, yet apart from Safari, none of my web browsers can seem to use it. To me, that means it doesn't work.

tmarthal 14y ago

While not exactly what you are proposing, ff you want/need to use characters as icons, there is a pretty neat hack called Font Awesome (http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/). It's used to replace the twitter bootstrap icons with font files; seems to work pretty well so far (with no need to re-color individual icons... you can style the font/icons with css). Things like <div class="icon-flag" style="color:red; font-size:36px"> will create a 36point red flag character for you.