CSS Sprite通过合并图标减少请求，适合静态图标；图标字体可缩放变色，适合动态场景。根据需求选择：重性能用Sprite，重灵活性用图标字体。
在初级前端项目中，图标的展示和布局是常见需求。为了提升页面加载速度与维护便利性，CSS 提供了两种经典方案：CSS Sprite 和图标字体（Icon Font）。它们各有特点，适用于不同场景。
CSS Sprite：将多个小图标合并为一张图
原理： 将多个小图标拼合到一张大图上，通过 CSS 的 background-position 控制显示区域，从而在不同元素上显示对应图标。
优点： 减少 HTTP 请求数量，提高加载效率，尤其适合静态图标较多的项目。
使用步骤：- 准备一张包含所有图标的 PNG 或 JPG 图片，通常为横向或纵向排列。
- 为需要显示图标的元素设置固定宽高。
- 设置 background-image 指向雪碧图，并用 background-position 调整偏移量。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.icon {
width: 16px;
height: 16px;
background-image: url('sprite.png');
background-repeat: no-repeat;
}
.home {
background-position: 0 0;
}
.search {
background-position: -16px 0;
}
.user {
background-position: -32px 0;
}
HTML 中使用：
<span class="icon home"></span>
注意：雪碧图需保证图标间距一致，避免重叠。可用 Photoshop 或在线工具（如 Sprite Cow）辅助生成坐标。
图标字体：用字体方式显示图标
原理： 将图标做成字体文件，通过 @font-face 引入，再用 Unicode 编码调用特定图标。
优点： 图标可缩放、可设颜色、兼容性好，适合需要动态变色或响应式设计的场景。
常见方案：- 使用现成库，如 FontAwesome、IconFont（阿里图标库）。
- 自定义图标字体，通过工具（如 IcoMoon）导出字体包。
引入方式：
@font-face {
font-family: 'MyIcon';
src: url('myicon.woff2') format('woff2');
}
.icon {
font-family: 'MyIcon';
speak: never;
font-style: normal;
}
HTML 使用：
<span class="icon"></span>
或通过类名绑定：
.home-icon::before {
content: "\e900";
}
然后：<span class="icon home-icon"></span>
图标字体支持通过 color、font-size 直接控制样式，灵活性高于图片。
如何选择？
对于初级项目，建议根据实际需求判断：
- 如果图标多为固定颜色、静态展示，且追求加载性能，选 CSS Sprite。
- 如果需要图标随主题变色、放大不失真，或项目后期可能扩展，优先用图标字体。
基本上就这些。两种方法都不复杂，但能显著提升页面表现力与性能。初学者掌握其基本用法后，可逐步结合实际项目优化细节。
