Windows Not Showing Country Flags

by Steven | Dec 12, 2022 | Articles

I enjoy designing websites but I recently discovered that Windows doesn’t like to display country flag emojis. They seem to work fine with Apple products, but there’s some issue that Microsoft seems to be avoiding but not including the flags.

There’s a work around if you design websites and want to display flags like I have done on my homepage.

I use Divi by ElegantThemes so the workaround is pretty easy to implement!

1. Visit https://github.com/talkjs/country-flag-emoji-polyfill and follow the instructions. I used the CDN script and it works perfectly. In Divi go to “Theme Options > Integration” and add the script to the < head > section.
2. Now you need to add your flags to it’s own property. I used a “Full Width Header” on my homepage, so it has “Subtitle” box where I put all of my flags.
3. Once you do this, go to “Fullwidth Header Settings > Advanced > Custom CSS > Subtitle” and enter font-family: “Twemoji Country Flags”;

That is it! Once you save everything, the flags will miraculously appear! It’s pretty silly we have to go through all of this trouble so all users can see the country flags, but it’s better than seeing the two letters instead.

Below is the script code that you need to use in Step 1 above.

<script type="module" defer>
  import { polyfillCountryFlagEmojis } from "https://cdn.skypack.dev/country-flag-emoji-polyfill";
  polyfillCountryFlagEmojis();
</script>

If you want to follow the full directions from the source website, please check out the GitHub for Country Flag Emoji Polyfill.