如何在 HTML/CSS 项目中正确引入并使用 IcoFont 图标字体-html教程-PHP中文网

如何在 HTML/CSS 项目中正确引入并使用 IcoFont 图标字体

本文详解在 web 前端项目中集成 icofont 的标准流程，涵盖 cdn 引入、本地字体文件部署、css 类名调用及常见避坑指南，无需依赖设计软件，真正实现代码级图标嵌入。

本文详解在 web 前端项目中集成 icofont 的标准流程，涵盖 cdn 引入、本地字体文件部署、css 类名调用及常见避坑指南，无需依赖设计软件，真正实现代码级图标嵌入。

IcoFont 是一套开源的矢量图标字体库，适用于网页开发。与在 Photoshop 或 Sketch 中手动粘贴图标的图形工作流不同，在 HTML/CSS 项目中使用 IcoFont 的核心是：通过或 @import 加载样式资源，再用类名（如 icofont-home）在 HTML 中声明图标——整个过程完全基于代码，不涉及字体安装或设计软件操作。

✅ 推荐方式：使用官方 CDN（最快上手）

在 HTML 文件的

中引入 IcoFont 的 CSS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icofont@1.0.2/icofont.min.css">

然后在任意 HTML 元素中添加对应图标类名即可：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<i class="icofont-home"></i>      <!-- 首页图标 -->
<i class="icofont-user"></i>      <!-- 用户图标 -->
<i class="icofont-search"></i>    <!-- 搜索图标 -->

? 提示：所有图标类名均以 icofont- 开头，完整列表可查阅 IcoFont 官网图标库 —— 点击图标后直接复制其 class 名，无需手动拼写。

? 替代方案：本地部署（适合离线/定制化场景）

若需离线使用或自定义字体路径：

下载 IcoFont 最新版 ZIP 包（https://www.php.cn/link/a6c7a894712b7eea275873110b9cad4e）；
解压后将 icofont.min.css 和 fonts/ 文件夹整体复制到项目静态资源目录（如 assets/css/ 和 assets/fonts/）；
修改 CSS 文件中 @font-face 的 src 路径，确保指向正确的字体文件（如 ../fonts/icofont.woff2）；

在 HTML 中引入本地 CSS：

<link rel="stylesheet" href="assets/css/icofont.min.css">

⚠️ 注意事项与常见问题

不要双击安装 .ttf 文件用于网页开发：该操作仅影响本地设计软件（如 PS），对浏览器无效；网页图标渲染完全依赖 CSS 中的 @font-face 声明和类名调用。
图标显示为空？检查三要素：① CSS 是否成功加载（开发者工具 Network 标签查看）；② 字体文件路径是否正确（尤其本地部署时）；③ 元素是否设置了足够尺寸（ 默认为行内元素，建议加 display: inline-block; font-size: 16px;）。
兼容性建议：IcoFont 支持 IE9+，若需支持更老版本，建议搭配 SVG Sprite 方案或使用现代替代库（如 Iconify）。