admin 管理员组

文章数量: 1132097

Unicode Emoji（字符表情符号），它们属于 文本字符，浏览器在渲染时使用系统或字体里的 Emoji 字形来显示。

📌 这些图标的 Unicode 编码

图标名称Unicode 编码HTML 实体写法
💬Speech BalloonU+1F4AC💬 或 💬
⚙️GearU+2699（+VS16）⚙ 或 ⚙
📱Mobile PhoneU+1F4F1📱 或 📱
🌍Globe Showing Europe-AfricaU+1F30D🌍 或 🌍

📌 在 HTML 里的写法示例

你可以直接写 emoji 字符：

<p>💬 ⚙️ 📱 🌍</p>

或者用 HTML 实体编码写（兼容旧环境）：

<p>&#128172; &#9881; &#128241; &#127757;</p>

📌 在 CSS 里作为内容

如果要在 ::before 或 ::after 伪元素中显示，可以这样写：

.icon-chat::before {
  content: "\1F4AC"; /* 💬 */
}
.icon-gear::before {
  content: "\2699";  /* ⚙ */
}
.icon-phone::before {
  content: "\1F4F1"; /* 📱 */
}
.icon-earth::before {
  content: "\1F30D"; /* 🌍 */
}

JS 脚本版，能自动把 Unicode Emoji 全集（3800+） 生成到页面上（可搜索/分类）

📌 Emoji 全集展示页面（HTML + JS）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Emoji 全集展示</title>
  <style>
    body {
      font-family: "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 20px;
    }
    h1 {
      font-size: 26px;
      margin-bottom: 20px;
    }
    #searchBox {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      margin-bottom: 20px;
    }
    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 60px);
      gap: 10px;
    }
    .emoji-item {
      font-size: 28px;
      text-align: center;
      background: #fff;
      border-radius: 8px;
      padding: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: 0.2s;
    }
    .emoji-item:hover {
      transform: scale(1.2);
      background: #f0f0f0;
    }
    .emoji-item span {
      display: block;
      font-size: 12px;
      color: #666;
      margin-top: 4px;
      word-break: break-all;
    }
  </style>
</head>
<body>
  <h1>Emoji 全集展示（可搜索）</h1>
  <input type="text" id="searchBox" placeholder="输入 Emoji 或 Unicode 过滤，如 ❤️ 或 1F600" />

  <div id="emojiContainer" class="emoji-grid"></div>

  <script>
    // Unicode 范围（Emoji 大部分在这些区间）
    const ranges = [
      [0x1F300, 0x1F5FF], // 符号 & 象形文字
      [0x1F600, 0x1F64F], // 表情
      [0x1F680, 0x1F6FF], // 交通 & 符号
      [0x1F700, 0x1F77F], // 炼金符号
      [0x1F780, 0x1F7FF], // 几何图形扩展
      [0x1F800, 0x1F8FF], // 补充箭头-C
      [0x1F900, 0x1F9FF], // 补充符号 & 表情
      [0x1FA00, 0x1FAFF], // 国际象棋符号等
      [0x2600, 0x26FF],   // 杂项符号
      [0x2700, 0x27BF],   // Dingbats
      [0xFE00, 0xFE0F],   // 变体选择符
    ];

    const emojis = [];

    // 生成 Emoji 集合
    ranges.forEach(([start, end]) => {
      for (let code = start; code <= end; code++) {
        const char = String.fromCodePoint(code);
        // 使用正则粗略检测是否为 Emoji
        if (/\p{Emoji}/u.test(char)) {
          emojis.push({char, code: code.toString(16).toUpperCase()});
        }
      }
    });

    const container = document.getElementById("emojiContainer");

    function render(list) {
      container.innerHTML = "";
      list.forEach(e => {
        const div = document.createElement("div");
        div.className = "emoji-item";
        div.innerHTML = `${e.char}<span>U+${e.code}</span>`;
        div.onclick = () => {
          navigator.clipboard.writeText(e.char).then(() => {
            alert("已复制: " + e.char);
          });
        };
        container.appendChild(div);
      });
    }

    // 初始渲染
    render(emojis);

    // 搜索过滤
    document.getElementById("searchBox").addEventListener("input", e => {
      const val = e.target.value.trim().toUpperCase();
      const filtered = emojis.filter(x =>
        x.char.includes(val) || x.code.includes(val)
      );
      render(filtered);
    });
  </script>
</body>
</html>

✨ 功能说明

  1. 页面会自动生成 Unicode 范围内的 Emoji 全集（3000+）。
  2. 你可以在搜索框输入：
    • 直接输入 ❤️ → 只显示爱心
    • 输入 1F600 → 显示 😀
  3. 点击任意 Emoji → 自动复制到剪贴板，并提示“已复制”。

本文标签： 自动生成 表情符号 图标 字符 器中

版权声明：本文标题：Emoji（字符表情符号）图标在浏览器中显示方式及自动生成大全 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.520sys.cn/xp/1765408802a1838589.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。