Showing posts with label emoji. Show all posts
Showing posts with label emoji. Show all posts

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/