HTML
The most straightforward way. You can paste the previously chosen Emoji.
<p>🔥</p>
Your other option is to use the codepoint of the Emoji and replacing U+
with &#x
.
<p>🔥</p>
CSS
In CSS you need to use the ::before
or ::after
pseudo-element coupled with the content property where you paste the Emoji as the value.
/* You need an HTML element with the class 'element' */
.element::before {
content: "🔥";
}
The same way, you can use codepoint replacing U+
with \0
.
/* You need an HTML element with the class 'element' */
.element::before {
content: "\01F525";
}
JavaScript
In JavaScript you need to specify the innerHTML
by pasting the Emoji.
/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = "🔥";
Similarly, you can use the String method fromCodePoint
mixed with the codepoint value where you replace U+
with 0x
.
/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = String.fromCodePoint(0x1F525);
****
<style>
body {
font-family: Arial, sans-serif;
}
.css-1::before {
content: "🔥";
}
.css-2::before {
/* replace U+ with \0 */
content: "\01F525";
}
p {
}
.fire {
font-size: 24px;
}
</style>
<h1>Emoji's in the Web</h1> <p><span class="fire html-1">🔥</span> Insert in HTML by copy pasting</p> <!-- replace U+ with &#x --> <p><span class="fire html-2">🔥</span> Insert in HTML with its codepoint (replace U+ with &#x)</p> <p><span class="fire css-1"></span> Insert in CSS by copy pasting</p> <!-- replace U+ with \0 --> <p><span class="fire css-2"></span> Insert in CSS with its codepoint (replace U+ with \0)</p> <p><span class="fire js-1"></span> Insert in JS by copy pasting</p> <!-- replace U+ with 0x --> <p><span class="fire js-2"></span> Insert in JS with its codepoint (replace U+ with 0x)</p> <p><a href="https://emojipedia.org/" target="_blank">Find your Emoji's</a></p>
<script>
document.querySelector(".js-1").innerHTML = "🔥"; // replace U+ with 0x document.querySelector(".js-2").innerHTML = String.fromCodePoint(0x1F525);
</script>
https://css-tricks.com/the-checkbox-hack/