Fontello和IcoMoon是图标字体生成工具，可自定义生成轻量级字体文件并提供CSS代码。1. Fontello界面简洁，访问官网选择图标、自定义设置后下载字体包，引入CSS文件即可通过class使用图标。2. IcoMoon功能更强，支持导入SVG、调整样式，进入App选择图标后生成字体，配置选项后下载并引入style.css，支持span标签或伪元素使用。3. 注意服务器MIME类型、字体路径匹配、颜色大小控制及旧浏览器兼容性。Fontello适合快速使用，IcoMoon适合高级定制，两者均能提升图标管理效率。
Fontello和IcoMoon是两款常用的图标字体生成工具，能帮助开发者从大量图标中挑选所需内容，自定义生成轻量级的图标字体文件（如woff、ttf等），并提供对应的CSS代码，便于在网页中使用。下面介绍它们的具体使用方法。
Fontello 使用方法
Fontellow 提供简洁直观的界面，适合快速生成图标字体包。
1. 访问官网打开 http://fontello.com，页面会加载默认图标集。
2. 选择图标浏览图标库，点击需要的图标，选中的图标会添加到右侧面板。可搜索关键词过滤图标。
立即学习“前端免费学习笔记（深入）”；
3. 自定义设置可修改字体名称（Font Name），每个图标会自动分配一个CSS类名和Unicode编码。
4. 下载字体包点击“Download”按钮，获取压缩包。解压后包含：
5. 引入项目将字体文件放入项目fonts目录，引入CSS文件：
<link rel="stylesheet" href="css/fontello.css">
使用图标时：
<i class="icon-home"></i>
IcoMoon 使用方法
IcoMoon 功能更强大，支持导入SVG图标、管理图标集、调整大小和间距等。
1. 打开 IcoMoon App访问 https://icomoon.io/app/，点击“IcoMoon App”进入构建器。
默认显示 IcoMoon 图标集，也可点击 “Import Icons” 导入自定义SVG文件。勾选需要的图标。
3. 生成字体点击底部 “Generate Font” 按钮，进入字体预览页。
4. 配置字体选项可修改图标的类名、Unicode值、字体名称等。IcoMoon 还提供“Preferences”设置字体尺寸、基线对齐等高级选项。
5. 下载字体包点击“Download”按钮，获取压缩包。内容包括：
- fonts目录：字体文件
- style.css：核心样式文件
- demo.html：图标使用示例
引入 style.css 或复制相关CSS规则到项目样式表：
<link rel="stylesheet" href="css/style.css">
使用方式：
<span class="icon-home"></span>
也支持伪元素方式插入图标。
常见注意事项
使用图标字体时注意以下几点：
- 确保服务器正确配置MIME类型，避免字体加载失败
- CSS中 @font-face 路径要与实际字体位置匹配
- 图标本质是文字，可用 font-size、color 控制大小和颜色
- 部分旧浏览器（如IE8）可能不支持woff格式，需保留eot
基本上就这些。Fontello 简单快捷，适合常规需求；IcoMoon 更灵活，适合需要导入SVG或精细控制的场景。两者都能有效减少HTTP请求，提升图标管理效率。
