Search code examples
htmlunicodeutf-8

Flag Emojis not rendering

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

Solution

  • 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=djibouti and look at your browser's rendering of the emoji flag for Djibouti:

    • If you see an image of Djibouti's flag similar to this then all is well:

      good emoji

    • But if you only see the country code DJ then the emoji flags are not supported for your browser/platform combination:

      bad emoji

    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".
    • [Updated on 10/27/23]: The Djibouti flag is now rendered correctly on Windows 10 when using Firefox, but Edge, Chrome and Brave all still show DJ instead of Djibouti's flag. That's small progress, but of no practical value unless you can control which browser is used to view the flag on Windows.

    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 probably 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