Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active March 21, 2022 15:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nolanlawson/1c67a41fb24978bab93a44ed1d62fab2 to your computer and use it in GitHub Desktop.
Save nolanlawson/1c67a41fb24978bab93a44ed1d62fab2 to your computer and use it in GitHub Desktop.
Download ZIP
emoji-picker-element Windows flag emoji twemoji fallback demo
Raw
index.html
<!doctype html>
<html lang=en>
<head>
<title>emoji-picker-element: Windows flag emoji fallback</title>
</head>
<body>
<h1>emoji-picker-element: Windows flag emoji fallback</h1>
<p>
On Windows 10/11, country flag emoji are currently
<a href="https://github.com/nolanlawson/emoji-picker-element/issues/269">not rendered as flags</a>.
This demo shows how to use emoji-picker-element with
<a href="https://github.com/talkjs/country-flag-emoji-polyfill">country-flag-emoji-polyfill</a>,
which replaces the missing country flag emoji with
Mozilla's <a href="https://github.com/mozilla/twemoji-colr">twemoji-colr</a> web font.
</p>
<emoji-picker></emoji-picker>
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
<script type="module">
import { polyfillCountryFlagEmojis } from 'https://cdn.skypack.dev/country-flag-emoji-polyfill@v0.1.1'
// Use "Twemoji Mozilla" font-family name because emoji-picker-element places that first in the font-family list
polyfillCountryFlagEmojis('Twemoji Mozilla')
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment