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

F

4

14

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.

Frizette answered 4/7, 2020 at 13:27 Comment(4)

Welcome to Stackoverflow! You have basically posted the same question again, which was closed. It will be better to edit the previous question and add some relevant details, posting the question multiple times is not going to get you an answer. Please read How to create a Minimal, Reproducible Example and How do I ask a good question? and edit your question accordingly. – Nappie 4/7, 2020 at 17:33

Where is the flag not rendered, in code or in browser? – Nappie 4/7, 2020 at 18:8

Try this: emojipedia.org/flag-barbados – Maurizia 5/7, 2020 at 7:38

Looks like the two rectangular boxes in your code represents the flag. You shouldn't use those emojis in HTML because they don't look the same on all devices. Instead, you should create an image of that emoji (preferably SVG) and then use the img tag to embed it in HTML and then make its height equal to 1em. – Avertin 5/7, 2020 at 10:58

I

7

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 🇯🇵: "🇯🇵". 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".

Innsbruck answered 5/7, 2020 at 6:14 Comment(0)

B

19

Use Noto Color Emoji font.

First, write a @font-face rule with the unicode-range property. Then add the font to the top of your font stack:

(Source)

@font-face {
  font-family: NotoColorEmojiLimited;
  unicode-range: U+1F1E6-1F1FF;
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

div {
  font-family: 'NotoColorEmojiLimited', -apple-system, BlinkMacSystemFont, 
  'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 
  'Segoe UI Emoji', 'Segoe UI Symbol';
}

<div>
  <p>
    🇦🇫 🇦🇱 🇩🇿 🇦🇩 🇦🇴 🇦🇬 🇦🇷 🇦🇲 🇦🇺 🇦🇹 🇦🇿 🇧🇸 🇧🇭 🇧🇩 🇧🇧 🇧🇾 🇧🇪 🇧🇿 🇧🇯 🇧🇹 🇧🇴 🇧🇦 🇧🇼 🇧🇷 🇧🇳 🇧🇬 🇧🇫 🇧🇮 🇨🇻 🇰🇭 🇨🇲 🇨🇦 🇨🇫 🇹🇩 🇨🇱 🇨🇴 🇰🇲 🇨🇩 🇨🇷 🇨🇮 🇭🇷 🇨🇺 🇨🇾 🇨🇿 🇰🇵 🇨🇬 🇩🇰 🇩🇯 🇩🇲 🇩🇴 🇪🇨 🇪🇬 🇸🇻 🇬🇶 🇪🇷 🇪🇪 🇸🇿 🇪🇹 🇫🇯 🇫🇮 🇫🇷 🇬🇦 🇬🇲 🇬🇪 🇩🇪 🇬🇭 🇬🇷 🇬🇩 🇬🇹 🇬🇳 🇬🇼 🇬🇾 🇭🇹 🇭🇳 🇭🇺 🇮🇸 🇮🇳 🇮🇩 🇮🇷 🇮🇶 🇮🇪 🇮🇱 🇮🇹 🇯🇲 🇯🇵 🇯🇴 🇰🇿 🇰🇪 🇰🇮 🇰🇼 🇰🇬 🇱🇦 🇱🇻 🇱🇧 🇱🇸 🇱🇷 🇱🇾 🇱🇮 🇱🇹 🇱🇺 🇲🇬 🇲🇼 🇲🇾 🇲🇻 🇲🇱 🇲🇹 🇲🇭 🇲🇷 🇲🇺 🇲🇽 🇫🇲 🇲🇨 🇲🇳 🇲🇪 🇲🇦 🇲🇿 🇲🇲 🇳🇦 🇳🇷 🇳🇵 🇳🇱 🇳🇿 🇳🇮 🇳🇪 🇳🇬 🇲🇰 🇳🇴 🇴🇲 🇵🇰 🇵🇼 🇵🇦 🇵🇬 🇵🇾 🇵🇪 🇵🇭 🇵🇱 🇵🇹 🇶🇦 🇰🇷 🇲🇩 🇷🇴 🇷🇺 🇷🇼 🇰🇳 🇱🇨 🇻🇨 🇼🇸 🇸🇲 🇸🇹 🇸🇦 🇸🇳 🇷🇸 🇸🇨 🇸🇱 🇸🇬 🇸🇰 🇸🇮 🇸🇧 🇸🇴 🇿🇦 🇸🇸 🇪🇸 🇱🇰 🇸🇩 🇸🇷 🇸🇪 🇨🇭 🇸🇾 🇹🇯 🇹🇭 🇹🇱 🇹🇬 🇹🇴 🇹🇹 🇹🇳 🇹🇷 🇹🇲 🇹🇻 🇺🇬 🇺🇦 🇦🇪 🇬🇧 🇹🇿 🇺🇸 🇺🇾 🇺🇿 🇻🇺 🇻🇪 🇻🇳 🇾🇪 🇿🇲 🇿🇼
  </p>
  <p>
    Noto Color Emoji abcdefghijklmnopqrstuvwxyz0123456789
  </p>
</div>

Basilbasilar answered 18/11, 2021 at 14:48 Comment(0)

C

12

Flags don't seem to work on Windows due to political reasons, see https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1

This thread seems to have found a workaround Flag Emojis not rendering

Cephalo answered 21/5, 2021 at 7:2 Comment(3)

What I stated in my answer is correct: flag emoji do work on Windows 10, but require a different font than the Segoe UI Emoji font. – Innsbruck 21/5, 2021 at 15:30

@PeterConstable are there some default fonts on Windows that would support emojis? – Cephalo 22/5, 2021 at 11:9

On Windows, the Segoe UI Emoji font is used to support emoji. It supports over 50000 family combinations (more than other platforms) but doesn't support flags. But if you have a different emoji font that supports flags, the flag emoji can be displayed. – Innsbruck 23/5, 2021 at 18:25

I

7

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 🇯🇵: "🇯🇵". 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".

Innsbruck answered 5/7, 2020 at 6:14 Comment(0)

A

1

The problem is that the Windows' default emoji font, Segoe UI Emoji, has the 26 country flag letter codepoints the country flags are composed of, but has only letters representing them, so the flags will always be rendered as the Segoe UI Emoji letters unless an application explicitly declares that another Emoji Font is to be preferred.

Luckily, you can just replace the Windows Emoji font by taking another Emoji Font and changing its internal name to Segoe UI Emoji.

I did that for Google's Noto Emoji font, which you can download at https://github.com/perguto/Country-Flag-Emojis-for-Windows.

Achernar answered 1/12, 2022 at 2:20 Comment(0)

Recommended topics

Hot tags