Hur du använder codepoints & emojis i HTML, CSS och JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emojis!</title>
<style type="text/css">
h2::before{
content: "\01F354";
}
</style>
</head>
<body>
<h1>Codepoint & Emoji code action!</h1>
<p>Þ</p>
<p>😃</p>
<h2></h2>
<p id="emoji"></p>
<p>🍔</p>
<p>🍔</p>
<script type="text/javascript">
var emoji = document.querySelector("#emoji");
var burger = String.fromCodePoint(0x1F354);
//var beer = String.fromCodePoint(0x1F37A);
//emoji.innerText = String.fromCodePoint(0x1F354);
emoji.innerText = burger + "🍺🍺🍺🍺🍺";
</script>
</body>
</html>
I HTML-källkod är HTML-representationen för specialtecken att föredra men i specifika fall går det även att använda operativsystem-specifika codepoints för tecken. I exemplet ovan motsvarar Þ ett tecken som i Windows teckenuppsättning har codepoint U+00DE. DeGraeve.com har en bra lista över HTML-representationer för specialtecken.
För att hitta codepoints för emojis, gå till Every Emoji by Codepoint eller Emoji Unicode Tables. Sök rätt på önskad unicode-codepoint, t.ex U+1F603 (Grinning Face With Big Eyes).
Beroende på var i din källkod du vill använda den codepoint som motsvarar en emoji eller ett specialtecken går du tillväga på olika sätt.
För att använda HTML-representation av en codepoint ändrar du vald codepoint från U+unicodevärde till &#xunicodevärde.
I CSS ändrar du vald codepoint från U+unicodevärde till \0unicodevärde.
För att använda en codepoint i JavaScript ändrar du vald codepoint från U+unicodevärde till 0xunicodevärde och konverterar den till
en teckensträng med funktionen String.fromCodePoint().
För att hitta en visuell representation av en emoji att klistra in i din källkod, gå till Emojipedia, sök rätt på önskad emoji. På webbsidan för emojin hittar du alternativet "Copy and paste this emoji". Klicka på knappen Copy och klistra sedan in urklippet i din källkod.
Se exempelkoden ovan för demonstrationer av hur du kan tillämpa de olika metoderna.
Mer info:
Using Emojis in HTML, CSS, and JavaScript
Samma video som i webbsidan ovan, på YouTube:
Emojis in HTML, CSS, and JS
Emojipedia
Emojis Wiki En annan sajt du kan använda för att hitta visuella representationer av emojis du kan kopiera och klistra in i din HTML-källkod.
Every Emoji by Codepoint
Emoji Unicode Tables
Full Emoji List, v12.0