html 中直接插入 unicode emoji 字符即可,如?、?、✅;需确保 在 最前面,否则会乱码;不建议用 img 或 base64 模拟,以免语义丢失和可访问性问题。

直接用 Unicode 字符就行,不用任何插件或 CSS,浏览器原生支持。
HTML 里怎么写 emoji?
把 emoji 当作普通文字插入即可,比如 ?、?、✅。它们本质是 Unicode 字符,和写 中 或 a 没区别。
- 推荐从 Unicode 官方列表 复制,避免输入法转义出错
- 不要用图片路径或 base64 模拟 emoji——语义丢失、缩放模糊、读屏器无法识别
- 在 JSX 或 Vue 模板中同样适用,但注意引号包裹:
{'?'}(React)或{{ '?' }}(Vue)
为什么有时候 emoji 显示成方块或问号?
不是 HTML 写错了,是字体或系统不支持该 emoji 的 Unicode 码点。
- 常见于旧版 Windows(如 Win7)、某些 Linux 发行版、或终端渲染环境
-
U+1F9D8(person in lotus position)比U+2705(✅)更容易 fallback,前者需要较新字体支持 - 检查页面
<meta charset="UTF-8">是否存在且在最前面——缺失会导致乱码,不是 emoji 本身问题
要不要用 img 标签加载 emoji 图片?
不建议。除非你明确要控制样式(比如统一灰度、固定尺寸),否则纯属自找麻烦。
立即学习“前端免费学习笔记(深入)”;
<img src="data:image/svg+xml,...>%20%E5%A2%9E%E5%8A%A0%E8%A7%A3%E6%9E%90%E5%BC%80%E9%94%80%EF%BC%8C%E4%B8%94%E6%97%A0%E6%B3%95%E8%A2%AB%E5%A4%8D%E5%88%B6%E7%B2%98%E8%B4%B4 %0A- CSS%20%E7%9A%84%20
content:%20" alt="HTML怎么插入表情符号_HTML emoji使用教程【趣味】" > 在伪元素中可用,但不适用于可交互文本场景 - 如果必须兼容极老环境(IE11 及以下),优先降级为文字描述,例如:「发送按钮
?」→「发送按钮(上传图标)」
最麻烦的其实是设计一致性:同一个 ? 在 iOS、Android、Windows 上长得不一样,用户看到的不是“一个表情”,而是“系统给的本地渲染结果”。别试图用 CSS 强行统一它——那不是前端该管的事。











