<html>
<body>
<div class="has-emoji">Hello world! I'm a unicorn: 🦄</div>
<script>
// Stolen from Modernizr: https://github.com/Modernizr/Modernizr/blob/v3.5.0/feature-detects/emoji.js
const hasEmojiSupport = () => {
var pixelRatio = window.devicePixelRatio || 1;
var offset = 12 * pixelRatio;
var node = document.createElement('canvas');
var ctx = node.getContext('2d');
ctx.fillStyle = '#f00';
ctx.textBaseline = 'top';
ctx.font = '32px Arial'; // Replace with the fonts you use, if they have better emoji support
ctx.fillText('🦄', 0, 0); // Replace with an emoji whose support you care about
return ctx.getImageData(offset, offset, 1, 1).data[0] !== 0;
}
if (!hasEmojiSupport()) {
console.log('emoji unsupported');
// Inserts https://twemoji.twitter.com/
const twemojiEl = document.createElement("script");
twemojiEl.src = "https://twemoji.maxcdn.com/v/13.0.1/twemoji.min.js";
twemojiEl.onload = () => {
document.querySelectorAll('.has-emoji').forEach(el => { // Replace with selectors you care about.
twemoji.parse(el);
});
}
document.body.appendChild(twemojiEl);
} else {
console.log('emoji supported')
}
</script>
</body>
</html>