iconfont 查看器

粘贴 iconfont 的 Unicode CSS 内容，自动解析图标并提供代码片段

iconfont CSS 解析

粘贴 iconfont 字体 CSS（包含 .icon-xxx:before{content:"\\exxx"} 规则）

广告位

使用说明

  1. 从 iconfont.cn 项目页面下载字体包，打开其中的 iconfont.css 文件
  2. 复制 CSS 全部内容到上方输入框，或点击"加载示例"按钮快速体验
  3. 点击"解析图标"按钮，自动提取所有图标类名与 Unicode 码
  4. 在图标网格中点击任意图标查看详情：大尺寸预览、Unicode、HTML、CSS content 代码
  5. 点击对应代码块旁的"复制"按钮可复制到剪贴板
  6. 若需查看实际渲染效果，请先在页面引入 iconfont 字体 CSS 文件

适用场景

  • 图标查找：在大型图标库中快速查找某个图标的 Unicode 码
  • 代码生成：快速生成 <i class="iconfont icon-xxx"> HTML 代码片段
  • 视觉预览：网格展示所有图标，方便挑选合适图标
  • 文档整理：导出图标清单，方便团队协作参考
  • 学习使用：了解 iconfont CSS 的工作原理与 content 属性

安全保障

  • 本地解析：CSS 解析与图标提取全部在浏览器本地完成
  • 隐私保护：不上传 CSS 内容到任何服务器
  • 无网络请求：解析过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

为什么图标显示为方框或乱码？

本工具仅解析 CSS 中的类名与 Unicode 码，但实际渲染图标需要引入对应的字体文件（iconfont.woff2 / woff / ttf）。请在你的项目中通过 @font-face 引入字体文件，并确保字体家族名与 CSS 中 @font-face 定义的 font-family 一致。

支持哪些 CSS 格式？

支持 iconfont.cn 标准生成的 CSS 格式，包括 .icon-xxx:before { content: "\exxx"; } 与 .icon-xxx:before{content:"\exxx"} 紧凑格式。也支持单引号 'content' 形式。同时支持带 .iconfont 基础类的写法。

字体家族名填什么？

默认填 iconfont（iconfont.cn 默认名称）。如果你的项目自定义了字体名（如 my-icons），请在此输入对应名称。它将影响生成的 HTML 代码中 class 的前缀部分。

能否批量导出图标清单？

目前支持单个图标复制，如需批量导出可手动复制 CSS 内容并粘贴到表格工具。后续版本将支持导出 JSON / CSV 格式的图标清单。