58

I have a dropdown menu on my header that I use to display phone numbers for different countries and I need to put a flag on its side, but no flags are showing, only the letter representation of the flags (for example the argentinian flag looks like this 🇦🇷 but it shows the emoji for the letter A and the letter R) as that how flag emojis works as far as I know, how can I evade this (showing a hamburger in the second phone number just to show that emojis do indeed work on my site).

<select name="Telefonos" id="group">
    <option value="+543515296002">&#x1F1E6;&#x1F1F7; +54351529600
    <option value="+12398105440">🍔 +12398105440
    <option value="+12398105440">🇺🇸 +12398105440
</select>

this is what I've tried, either using the code or copying the emoji doesn't work, even though it does show when I am coding it.

enter image description here

and this is what actually renders

enter image description here

1
  • 2
    does your browser support those emojis? Feb 4, 2019 at 15:58

8 Answers 8

45

The flag emojis may not render regardless of what you do, depending on the platform (rather than merely the browser and/or the browser font). To find out, go to https://emojipedia.org/search/?q=emoji+flags and look at the rendering of the emoji flag for Djibouti, to the left of the text "Flag: Djibouti".

If you see an image of a flag all is well but if you only see DJ then the emoji flags may not be supported. I visited that page on an iPad, Linux Mint 18.2 and Windows 10, and this is what I found:

  • The Djibouti flag emoji rendered on the iPad.
  • The Djibouti flag was rendered as DJ on Linux Mint 18.2 using Firefox.
  • The Djibouti flag was rendered as DJ on Windows 10 using Firefox, although this was expected since "Microsoft doesn't support any country flags on Windows, instead showing the two-letter country codes".

So if you only want to render emoji flags in the browser on Apple platforms you should be fine, and if you want to render emoji flags in the browser on Windows it will render the two character country code instead. I'm not sure about the situation on Linux since although it didn't work for me in my environment, I couldn't find anything explicitly stating that it should or should not work.

An alternative to using Unicode emoji flags if you need this working on all platforms is to download free emojis which are actually just small png images. Here are some samples for the Argentinian flag.


Update:

In the absence of a true solution as explained above, here's an alternative approach which does not use Unicode emojis, but instead uses downloaded .png images:

<!DOCTYPE html>
<html>
    <head>
        <title>Flag demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!–– Credit to Alvaro Montoro for this approach - see https://stackoverflow.com/a/41189982/2985643 ––>
        <link rel="StyleSheet" href="css/flagdemo.css">
    </head>
    <body>
        <h1>Flag demo</h1>
        <div class="select-sim" id="select-color">
            <div class="options">
                <div class="option">
                    <input type="radio" name="flag" value="" id="flag-" checked />
                    <label for="flag-">&#x2690; Pick a country</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Argentina" id="flag-argentina" />
                    <label for="flag-argentina"><img src="img/argentina-flag-round-icon-16.png" alt="" /> Argentina</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Brazil" id="flag-brazil" />
                    <label for="flag-brazil"><img src="img/brazil-flag-round-icon-16.png" alt="" /> Brazil</label>
                </div>
                <div class="option">
                    <input type="radio" name="flag" value="Chile" id="flag-chile" />
                    <label for="flag-chile"><img src="img/chile-flag-round-icon-16.png" alt="" /> Chile</label>
                </div>
            </div>
        </div>
    </body>
</html>

The content of the .css file (flagdemo.css) is identical to that provided by Alvaro Montoro in this SO answer to the question How to add images in select list?.

Since this approach only uses standard HTML and CCS (no Javascript or JQuery) it should work on any platform:

htmlExample

5
  • this seems to be a good alternative, but i am not finding how to insert a png into the start of a option of a select, mind you i am using wordpress
    – leonidas56
    Feb 13, 2019 at 15:19
  • i got it to work on jsfiddle but when i put it back on my site it just doesnt work jsfiddle.net/5v7onjb8/
    – leonidas56
    Feb 13, 2019 at 16:22
  • @leonidas56 I updated my answer, with an approach that does not use Unicode emojis. see How to add images in select list? for more details.
    – skomisa
    Feb 13, 2019 at 20:19
  • Hey! this worked perfectly, only thing is i am not being able to actually select any option, i can only open or close the select
    – leonidas56
    Feb 14, 2019 at 20:33
  • As for Linux, I see all flags on FF 70, no flags at all in Chrome/ium 77/78/79. Haven't found a webfont yet. Oct 23, 2019 at 7:52
27

Microsoft’s emoji font, Segoe UI Emoji, deliberately does not support any flags. You’d have to supply your own font files if colour display for Windows users is important to you. Unfortunately, there is no colour font format that is supported by all common browsers. Firefox ships with Twemoji (Twitter’s emoji set) included, but using the same font in Chrome will result in black-and-white outline drawings instead, for example.

You’re honestly better off just using embedded images if it’s feasible for your project. Alternatively, you need to compromise and accept that most Windows users simply won’t see any flags displayed.

Another option is to use a polyfill to add the emojis with that. https://github.com/talkjs/country-flag-emoji-polyfill

3
13

As mentioned by several others, some platforms such as Windows don't support country flags (see https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05?page=1 for a longer discussion on why this might be the case).

I ended up using a script for replacing my emojis with pngs. I thought this might be helpful for others, so here you go

HTML-version:

<html>
<body>
    <h1> 🇺🇸  🇺🇸  🇺🇸 </h1>
    <p>Lets test more emoji replacement 😀 🇬🇧 🇺🇸 .</p>
</body>
<script>
const flagemojiToPNG = (flag) => {
    var countryCode = Array.from(flag, (codeUnit) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
    return "<img src='https://flagcdn.com/24x18/" + countryCode + ".png'>"
}
    var reg = new RegExp('(?:\ud83c[\udde6-\uddff]){2}', 'g');
    document.body.innerHTML = document.body.innerHTML.replaceAll(reg, flagemojiToPNG);
</script>
    </html>

React version (for replacing individual flags):

const flagemojiToPNG = (flag) => {
    var countryCode = Array.from(flag, (codeUnit) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
    return (<img src={`https://flagcdn.com/24x18/${countryCode}.png`} alt='flag' />)
}
0
5

A great solution to this problem is to use a polyfill like this: https://github.com/talkjs/country-flag-emoji-polyfill

You just add a font to every place where you use a flag emoji:

body {
  font-family: "Twemoji Country Flags", "Helvetica", "Comic Sans", serif;
}

There is also a Chrome extension that uses this polyfill to fix this problem. Looking at their source code, they just add the font to every HTML element containing a flag emoji. Seems to be a better solution then using PNG's.

2

it's depending on BOTH the platform and the browser

so the best solution for the present is to use images

Download Free Flags from here: https://flagpedia.net/download

I will recommend using webp

1
  • 1
    You should delete this answer. It does not add anything new, and is just a rewording of what was in my existing answer below: "The flag emojis may not render regardless of what you do, depending on the platform (rather than merely the browser and/or the browser font)....An alternative to using Unicode emoji flags if you need this working on all platforms is to download free emojis which are actually just small png images."
    – skomisa
    Apr 3, 2022 at 17:35
1

Can use react-select to create dropdown with below properties.

Need to create Array of object with two-letter country code, label and value for dropdown.

{
      label: `india`,
      value: `+91`,
      emojiFlag: 'IN'
}

Code to convert two-letter country code to flag png of Flagcdn.

flagemojiToPNG = (flag: string) => {
    var countryCode = Array.from(flag, (codeUnit: any) => codeUnit.codePointAt()).map(char => String.fromCharCode(char-127397).toLowerCase()).join('')
    return (<img src={`https://flagcdn.com/24x18/${countryCode}.png`} alt='flag' />)
  }

Import Select from 'react-select';
<Select
          options={dataSource}
          formatOptionLabel={data => (
            <>{flagemojiToPNG(data.emojiFlag)}  {data.label}</>
          )}
          placeholder={"Select Country"}
          onChange={}
          value={}
        />

Can render image on React select with formatOptionLabel Prop of React-select. datasource- Will be your dropdown's datasource.

0

https://www.npmjs.com/package/react-countries-flags

if you have no idea how to display all the flags of the countries of the world, I created a simple npm package, you can use it, it works on all operating systems and browsers

yarn add react-countries-flags
import ReactCountriesFlags from "react-countries-flags";

const App = () => {
  return (
    <div className="App">
      <ReactCountriesFlags isoCode = 'us'/>
    </div>
  );
}

export default App;
-2

As far as I know, there is no possible way to display flag emojis like this. You could try implenting the flag with an image or try using Fontawesome.com (it's free).

8
  • No, not in a dropdown. But why do you think there's no possible way to do this, as the OP's own screenshot shows it working one out of three times?
    – Mr Lister
    Feb 4, 2019 at 19:36
  • Because flag emojis are not supported, there not like the other emojis. If you look at the screenshot, you can see, that all flags are not working except the non-flag emoji.
    – Lukas
    Feb 6, 2019 at 15:44
  • Sorry, again, what do you mean by "flag emojis are not supported"? At the very least you will need some context here. This is what I see in Firefox when I put the OP's code in a jsfiddle: i.stack.imgur.com/aou6m.png
    – Mr Lister
    Feb 8, 2019 at 20:31
  • The emoji font Segoe UI Emoji only supports regular emojis and no flags. It simply means that flag emojis are not shown. That is the reason because all flag emojis in the dropdown are not working, but the regular hamburger works.
    – Lukas
    Feb 9, 2019 at 22:15
  • 1
    @MrLister Segoe UI is the standard and will be used anyway.
    – Lukas
    Feb 14, 2019 at 20:34

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.