SVG转图标字体CSS代码
上传SVG图标，生成图标字体@font-face与Unicode映射CSS代码，支持自定义类名前缀与起始编码，适用于前端集成与图标库管理。
上传 SVG 图标
拖拽 SVG 文件到这里
或点击选择文件（支持多选）
仅支持 .svg 文件
字体设置
预览设置
图标列表
0 个图标上传 SVG 图标开始
CSS 代码
/* 上传 SVG 图标后生成 CSS 代码 */
使用说明
- 上传 SVG 文件（可多选）
- 设置字体名称、类名前缀与起始编码
- CSS 代码会自动生成，可直接复制到你的项目
- 使用 svgtofont、iconfont-cli 或 FontForge 生成字体文件
HTML 使用方式
<i class="icon-home"></i>
文档与说明
什么是图标字体？
图标字体（Icon Font）是一种将图标打包成字体文件的技术，可以通过 CSS 的 font-family 来使用图标。与图片相比，图标字体体积更小、可缩放，并可用 CSS 控制颜色与大小。常见的图标字体库包括 Font Awesome、Material Icons 等。
提示
本工具用于生成图标字体的 CSS 映射代码。要生成实际字体文件（WOFF/WOFF2/TTF 等），需要配合 svgtofont、iconfont-cli 或 FontForge 等字体生成工具。
使用自定义图标字体的优势
- 减少 HTTP 请求数量，提高页面加载速度
- 使用 CSS 轻松控制图标颜色、大小与状态效果
- 在不同尺寸下保持清晰锐利
- 更方便地添加动画与交互
SVG 转字体的工作原理
- 准备 SVG 图标：确保每个 SVG 是单一图标，路径清晰
- 优化 SVG：移除不必要的元数据与注释，减小体积
- 生成 CSS 映射：使用本工具生成图标与 Unicode 编码的映射
- 转换为字体：使用 svgtofont、iconfont-cli 或 FontForge 转换为 WOFF/WOFF2/EOT/TTF
- 集成使用：在项目中引用字体文件与 CSS，使用图标类
使用示例
<!-- HTML中使用 -->
<i class="icon icon-home"></i>
<i class="icon icon-user"></i>
<!-- CSS样式 -->
.icon {
display: inline-block;
font-family: 'icon-font';
font-size: 24px;
color: #333;
}
/* 悬停效果 */
.icon:hover {
color: #007bff;
transform: scale(1.1);
}图标字体 vs SVG Sprite
| 特性 | 图标字体 | SVG Sprite |
|---|---|---|
| 浏览器支持 | 需要支持 @font-face | 所有现代浏览器 |
| CSS 控制 | 颜色、大小、阴影 | fill、stroke |
| 性能 | 一次加载，缓存友好 | 按需加载 |
| 最佳场景 | 单色图标库 | 彩色、复杂图标 |
常见问题（FAQ）
生成的字体文件在哪里？
本工具生成 CSS 代码和图标映射，你需要使用 svgtofont、iconfont-cli、FontForge 等工具把 SVG 转换为 WOFF2/WOFF/TTF 等字体文件。
为什么有些图标显示不正确？
可能原因包括 SVG 过于复杂、使用描边而非填充、尺寸不一致等。建议使用简洁单色 SVG，并确保路径干净且闭合。
图标字体的兼容性如何？
图标字体技术成熟，现代浏览器均支持。若需要兼容旧环境，可额外提供 EOT 等格式作为降级方案。