Wednesday, October 11, 2023

Emoji in the Browser

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>&#x1F525</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">&#x1F525</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/