发表新帖
发表新帖

Flag Emojis not rendering

后端 未结
关注
3 499
一生所求
一生所求 2021-02-05 01:51

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 r

相关标签:
3条回答
  • 长情又很酷
    2021-02-05 02:08

    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).

    0 讨论(0)
  • 谎友^
    2021-02-05 02:12

    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:

    0 讨论(0)
  • 暖寄归人
    2021-02-05 02:17

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题