CODEWITHSUNDEEP
htmlemoji
user1986815
user1986815

Reputation:

How to use iemoji on edge

I have this code :

<option> &#x1F1E9;&#x1F1EA; Deutsch</option>
or 
<option> &#127465;&#127466; Deutsch</option>

and I get this on Firefox :
enter image description here

but on Edge it looks like this :
enter image description here

What have I done wrong ?

Upvotes: 4

Views: 473

Answers (1)

myf
myf

Reputation: 11313

Sadly, Windows comes without system Emoji font containing colourful flag ligatures (and many more glyphs from Emoji land). Since Chrome and Edge rely on system fonts, we see those simple characters and not the ligature.

Firefox (still) embeds its own nice fallback Emoji font based on Twitters ("Twemoji Mozilla") to mitigate this. So the only way to get it working across browsers is to provide webfont.

There is nicely usable Mozilla's Twemoji font compiled for web usage by Maxime Euziere at https://xem.github.io/unicode13/emoji.html :

/*
Licenses for TwemojiMozilla.ttf: https://github.com/mozilla/twemoji-colr/blob/master/LICENSE.md#license-for-the-visual-design
Derived from: https://twemoji.twitter.com/
Source: https://xem.github.io/unicode13/emoji.html 
*/
@font-face {
  font-family: "Twemoji from xem.github.io";
  src: url("https://xem.github.io/unicode13/Twemoji.ttf") format("truetype");
  unicode-range: U+00A9-E007F;
  /* @see https://github.com/mozilla/twemoji-colr/issues/56 */
}

:root {
  font-family: "Twemoji from xem.github.io", Segoe UI Emoji, Segoe UI Symbol, Segoe, sans-serif;
}
<p>&#x1F1E9;&#x1F1EA; Deutsch

Upvotes: 4

Related Questions