更新：自从我第一次写这篇文章以来已经快一年了，基本技术仍然相同，但我稍微改进了样式规则并更新了我的图像链接。
在文本中包含内嵌表情符号非常容易，因为它们基本上只是文本。这就是它们的设计目的。但我经常发现我想使用尚不存在的表情符号，例如俄亥俄州国旗
——或者一个可能永远不会存在的表情符号——比如西南航空的标志
。
方法如下
-
准备图像。
- 图像应该是正方形（1:1 长宽比），否则它们会被下面的样式规则压扁。
- 我喜欢使用 SVG 文件，因为它们很小并且可以很好地缩放，但普通的 JPG 或 PNG 也可以。
- 如果使用光栅图像格式（PNG 或 JPG），图像可能不需要超过 128×128 像素（或者可能是 256×256）。不要使用巨大的图像文件！
-
托管图像
- 将图像上传到您最喜欢的托管平台并记下 URL。我使用自己的 CDN ，但会做适合您的事情。
-
使用
<img>元素和class属性将图像插入 HTML 文档中。这是一个例子：
<p>Hello there. Here is some text with <img src="https://some.place/moo.svg" class="emoji"> an inline emoji.</p>
- 为您的自定义类似表情符号的图像创建 CSS 样式。我使用类名“emoji”。
img.emoji { display: inline-block; width: 1em; height: 1em; border-radius: 0; vertical-align: middle; margin-block-start: calc(1ex - 1cap); }
要查看其实际效果，请查看此交互式演示。