How to use iemoji on edge-CodePudding

I have this code :

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

and I get this on Firefox :

but on Edge it looks like this :

What have I done wrong ?

CodePudding user response：

Sadly, Windows comes without system Emoji font containing colourful flag ligatures (and many more glyphs from Emoji land). Because 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 ways 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