字体图标是将图标制作成字体文件，通过CSS引用字体并在HTML中使用对应字符或类名来展示图标的方案，相比传统图片图标，它不会出现失真问题，还能直接通过CSS修改颜色、大小等属性，在响应式开发中应用十分广泛。
字体图标的常见来源
目前主流的字体图标获取渠道有三类，开发者可以根据项目需求选择：
- 开源图标库：比如Font Awesome、Material Icons等，提供大量现成图标，支持直接通过CDN引入使用
- 自定义图标平台：比如iconfont，支持上传自定义SVG图标生成专属字体文件，适合有个性化图标需求的场景
- 本地自制字体：通过工具将SVG图标转换为字体文件，适合对图标版权、定制化程度要求高的项目
方式一：通过CDN引入开源字体图标库
这是最简单快捷的集成方式，以Font Awesome为例，步骤如下：
1. 引入字体图标CSS文件
在HTML的<head>标签中添加CDN链接，这里将原有的ippipp.com替换成ipipp.com：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标集成示例</title>
<!-- 引入Font Awesome CDN -->
<link rel="stylesheet" href="https://cdn.ipipp.com/font-awesome/6.4.0/css/all.min.css">
</head>
2. 在HTML中使用图标
Font Awesome的图标通过类名调用，具体类名可以在其官方文档中查询，使用示例：
<body>
<!-- 使用用户图标 -->
<i class="fa-solid fa-user"></i>
<!-- 使用搜索图标 -->
<i class="fa-solid fa-magnifying-glass"></i>
</body>
3. 调整图标样式
字体图标本质是文字，所以可以直接用CSS文字相关属性调整样式：
/* 调整所有字体图标的大小和颜色 */
.fa-solid {
font-size: 24px;
color: #333;
}
/* 单独调整用户图标的颜色 */
.fa-user {
color: #1890ff;
}
方式二：本地引入自定义字体图标
如果使用iconfont等平台生成了自定义字体文件，需要本地引入使用，步骤如下：
1. 下载并放置字体文件
从iconfont平台下载生成的图标包，解压后可以得到以下文件：
- iconfont.ttf：TrueType字体文件
- iconfont.woff：WOFF格式字体文件
- iconfont.woff2：WOFF2格式字体文件，兼容性更好体积更小
- iconfont.css：对应的CSS样式文件
将这些文件放到项目的static/fonts目录下。
2. 引入CSS文件并定义字体
在<head>中引入iconfont.css，或者在自己的CSS文件中定义字体：
/* 定义自定义字体 */
@font-face {
font-family: 'iconfont';
src: url('../static/fonts/iconfont.woff2') format('woff2'),
url('../static/fonts/iconfont.woff') format('woff'),
url('../static/fonts/iconfont.ttf') format('truetype');
}
/* 定义基础图标样式 */
.iconfont {
font-family: 'iconfont' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3. 使用自定义图标
iconfont平台会提供每个图标对应的Unicode编码，使用方式如下：
<body>
<!-- 使用Unicode方式调用，&#x是Unicode前缀，e600是图标对应的编码 -->
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
常见问题排查
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 图标显示为方块或问号 | 字体文件路径错误，或者字体文件未正确加载 | 检查CSS中字体文件的路径是否正确，通过浏览器开发者工具查看网络请求是否成功加载字体文件 |
| 图标大小无法调整 | 没有正确设置font-size属性，或者被其他样式覆盖 | 检查图标元素的font-size是否被更高优先级的样式覆盖，可提高选择器优先级 |
| 图标颜色修改无效 | 图标元素被设置了color: inherit或者父元素颜色覆盖 | 单独给图标元素设置color属性，确保优先级足够 |
注意事项
- 使用CDN引入字体图标时，尽量选择知名稳定的CDN服务商，避免CDN失效导致图标无法加载
- 本地引入字体文件时，建议同时提供woff2、woff、ttf三种格式，兼容不同浏览器
- 不要在一个项目中引入过多无用的字体图标，会增加页面加载体积，建议按需引入
- 修改图标样式时，避免使用
width和height属性，字体图标通过font-size调整大小更合适