在网页开发中，图标是提升页面视觉效果和交互体验的重要元素，常见的图标引入方式有CSS精灵图和字体图标两种，二者在实现逻辑和使用场景上有明显差异。
一、CSS精灵图引入方式
CSS精灵图也叫CSS Sprites，是将多个小图标合并到一张大图片中，通过background-position属性定位显示需要的小图标，减少HTTP请求次数，提升页面加载速度。
1. 准备工作
首先需要准备一张包含所有所需图标的精灵图，假设精灵图文件名为sprite.png，放在项目的images目录下，图标尺寸统一为24px*24px，横向排列。
2. 具体实现步骤
- 在HTML中创建需要显示图标的元素，比如
<span>标签，设置对应的类名 - 在CSS中设置元素的宽高和背景图，通过
background-position调整背景图位置，显示目标图标
3. 代码示例
以下是一个使用CSS精灵图引入首页图标的示例：
/* 精灵图基础样式 */
.icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url('../images/sprite.png');
background-repeat: no-repeat;
}
/* 首页图标，背景图向左偏移0px */
.icon-home {
background-position: 0 0;
}
/* 用户图标，背景图向左偏移-24px */
.icon-user {
background-position: -24px 0;
}
/* 设置图标 */
.icon-setting {
background-position: -48px 0;
}
对应的HTML代码：
<span class="icon icon-home"></span> <span class="icon icon-user"></span> <span class="icon icon-setting"></span>
二、字体图标引入方式
字体图标是将图标制作成字体文件，通过CSS引入字体，使用对应的字符编码或者类名来显示图标，本质是文字，支持像文字一样设置颜色、大小等属性。
1. 常见字体图标库
常用的字体图标库有Font Awesome、Iconfont等，也可以自己制作字体图标文件，本文以Iconfont为例讲解引入方式。
2. 具体实现步骤
- 从字体图标库下载所需的图标字体文件，包含
ttf、woff、woff2等格式，放在项目的fonts目录下 - 在CSS中定义
@font-face规则，引入字体文件 - 定义图标基础样式和对应图标的字符编码或者使用类名调用
3. 代码示例
以下是自定义字体图标的引入示例：
/* 引入字体文件 */
@font-face {
font-family: 'my-icon';
src: url('../fonts/my-icon.woff2') format('woff2'),
url('../fonts/my-icon.woff') format('woff'),
url('../fonts/my-icon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* 图标基础样式 */
.iconfont {
font-family: 'my-icon' !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 首页图标对应编码 e601 */
.iconfont-home:before {
content: 'e601';
}
/* 用户图标对应编码 e602 */
.iconfont-user:before {
content: 'e602';
}
对应的HTML代码：
<span class="iconfont iconfont-home"></span> <span class="iconfont iconfont-user"></span>
三、两种方式对比
为了更清晰地了解两种方式的差异，以下是核心维度对比：
| 对比维度 | CSS精灵图 | 字体图标 |
|---|---|---|
| 本质 | 图片 | 字体文字 |
| 样式修改 | 修改大小需要重新调整background-position，颜色无法直接修改，需要更换精灵图 | 可以直接通过font-size修改大小，color修改颜色，支持text-shadow等文字属性 |
| 兼容性 | 兼容所有浏览器 | 老旧浏览器可能不支持woff2格式，需要做好兼容处理 |
| 适用场景 | 图标样式复杂、不需要频繁修改颜色大小的场景 | 图标样式简单、需要灵活调整样式、多尺寸展示的场景 |
四、选择建议
如果项目中的图标样式固定，不需要调整颜色和大小，且图标复杂度较高，优先选择CSS精灵图；如果图标需要适配不同尺寸，经常调整颜色，或者需要添加文字阴影等效果，优先选择字体图标。在实际开发中，也可以两种方式结合使用，根据图标的具体需求灵活选择。
HTML图标引入CSS精灵图字体图标icon_fontbackground_position修改时间：2026-06-24 05:24:30