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 编码调用特定图标。

优点： 图标可缩放、可设颜色、兼容性好，适合需要动态变色或响应式设计的场景。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

常见方案：

• 使用现成库，如 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">&#xe900;</span>

或通过类名绑定：

.home-icon::before {   content: "e900"; }

然后：<span class="icon home-icon"></span>

图标字体支持通过 color、font-size 直接控制样式，灵活性高于图片。

如何选择？

对于初级项目，建议根据实际需求判断：

• 如果图标多为固定颜色、静态展示，且追求加载性能，选 CSS Sprite。
• 如果需要图标随主题变色、放大不失真，或项目后期可能扩展，优先用图标字体。

基本上就这些。两种方法都不复杂，但能显著提升页面表现力与性能。初学者掌握其基本用法后，可逐步结合实际项目优化细节。