Search code examples
htmlwindowsemojiflagscountry

How do I view country flags on Windows 10 through HTML?

Is there a work around to make country flag emoji visible on windows 10 through HTML?

<!DOCTYPE html>
  <html>
    <style>
      body {
        font-size: 40px;
      }
    </style>
    <body>
      <p>9983 will display &#9983;</p>
      <p>How to display American or Japanese flags?</p>
      <p>🇺🇸 is just letters on Windows 10 &#128531;</p>
    </body>
  </html>

I found this on https://mdbootstrap.com/docs/jquery/content/flag/

I don't see a flag emoji on https://www.w3schools.com/charsets/ref_emoji.asp

I can view them on https://www.emojicopy.com/ but cannot use.

I found a CSS flag on https://github.com/pixelastic/css-flags/blob/master/app/styles/_flags/usa.scss

I'm still learning to use stackOverflow, and I'm new at coding. This is my fourth try at this question.

Solution

  • Windows includes the Segoe UI Emoji font, but it does not support flags. To see flag emoji on Windows 10, you'll have to provide a custom emoji font that does support flags.

    There's an ISO standard with two-letter codes for countries, like "JP" for Japan. In Unicode, the emoji flags are encoded as a pair of special characters that correspond to "A" to "Z", but that are different characters from A-Z. You can see the different sequences at https://unicode.org/emoji/charts/full-emoji-list.html#country-flag. For example, for the Japanese flag the sequence U+1F1EF U+1F1F5 is used. To encode those in a Web page, you can use character entities &#x1f1ef;&#x1f1f5;: "🇯🇵". If the browser / host OS support display of emoji flags, that's what you'll see. If not, you'll probably see something that looks like "JP".