如何使用 HTML、CSS 或 JavaScript 在您的网站中添加表情符号

Emoji 表情符号最早出现于 1997 年的日本手机上。它们是表情符号的衍生品；表情符号是基于文本的表情模仿 ;-) –是的，这是一个真实的例子。

随着越来越多的计算机、移动设备、应用程序、游戏等采用表情符号，其受欢迎程度逐年增长。如今，表情符号非常流行，已经成为流行文化的一部分。

我们正在使用这些沟通工具，尤其是在年轻一代中。但它们是如何工作的呢？为了简单起见，我们假设表情符号是字符；非常类似于字母、标点符号或符号。

👽📞🏠

你能找到这部电影吗？

我该如何将这些表情符号融入我的文章中？如何在网络上的任何地方实现？

我们将了解 HTML、CSS 和 JavaScript 中可用的不同技术。它们依赖于两种方法：复制粘贴和代码点。
首先找到你的 Emoji 表情符号，然后按照你所需的语言步骤操作。

HTML

最直接的方法，就是粘贴之前选择的表情符号即可。

<p>🔥</p>

您的另一个选择是使用表情符号的代码点并替换U+为&#x。

<p>&#x1F525</p>

CSS

在 CSS 中，您需要使用::before或::after伪元素结合内容属性，将表情符号粘贴为值。

/* You need an HTML element with the class 'element' */
.element::before {
  content: "🔥";
}

同样，您可以使用代码点U+替换\0。

/* You need an HTML element with the class 'element' */
.element::before {
  content: "\01F525";
}

JavaScript

在 JavaScript 中，您需要innerHTML通过粘贴表情符号来指定。

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = "🔥";

类似地，您可以将 String 方法fromCodePoint与代码点值混合使用，U+用替换0x。

/* You need an HTML element with the class 'element' */
document.querySelector(".element").innerHTML = String.fromCodePoint(0x1F525);

Codepen 上的现场示例

一个例子难道不胜过千言万语吗？😄

所有主流浏览器都支持 Emoji，所以没必要找借口。
快来试试，在网络上尽情使用 Emoji 吧！

玩着玩着就学会了！🔥

如果您发现我提供的东西有价值，请不要犹豫，给我买杯咖啡😇

用表情符号描述的电影是ET

注意：有很多集成 Emoji 的选项，本文就不一一介绍了。图标字体或 SVG 就是例子，具体使用哪种则由您自行决定。