IcoMoon Icons logo

IcoMoon 使用教程:从选图标到上线,四步

先说结论:打开官方应用 → 点选图标 → Generate Font → Download,一套走完大约 5 分钟,得到一个包含字体文件、现成样式表和演示页的压缩包。整个过程免费、免注册。下面按步骤展开,并标出中文用户问得最多的几个坑。

第一步:选图标(或导入自己的 SVG)

IcoMoon 教程第一步:在图标库网格中点选图标

进入 icomoon.io/app,顶部就是 491 个免费图标,点击即选中。要用自己的图:点 Import Icons 上传 SVG,会进入一个 Untitled Set,与内置图标一样点选。底部状态栏实时显示已选数量。

第二步:生成字体前,检查命名与码点

IcoMoon 教程第二步:生成字体前核对字形名称与 unicode 码点

点底部 Generate Font 进入确认屏。这一屏值得停一分钟:每个字形的名字就是将来的 CSS 类名,码点是 \e900这类私有区值(不会与正文文字冲突)。名字含糊的现在就改;Preferences 里还能改 icon- 前缀和字体名。

第三步:下载导出包,认识里面每个文件

IcoMoon 教程第三步:导出压缩包内容与生成的样式代码

解压后:fonts/(三种格式)、 style.css(@font-face + 图标类)、 demo.html(打开即可肉眼验收)、以及最重要的 selection.json——它是这个项目的存档:以后把它重新 Import 回应用,名字、码点、设置原样恢复。别删,建议进 git。

第四步:接入项目

fonts/style.css 拷进工程、引入样式表,页面里写 <span class="icon-home"></span>即可。装饰性图标记得加 aria-hidden="true",读屏器才不会念出私有区乱码。不想跑生成器、只要现成的全套 491 个?中文下载页直接给文件。

图标出不来?

十有八九是字体路径:CSS 里的 url("fonts/…")相对的是 CSS 文件而不是页面。完整排查树(404、MIME、缓存、码点冲突)单独成页: IcoMoon 图标不显示怎么办

491 个免费图标不够用时,Ultimate 付费包一次性 $59 提供 1,500+ 图标含 SVG 源文件(不是订阅)。价格逐档对比见价格页。想直接入手 Ultimate: