使用<link>引入在线图标库或@font-face加载本地图标字体文件。1. 通过<link>引入Google Material Icons或Font Awesome的CDN链接，再用i或span标签配合类名调用图标；2. 下载图标字体包后，在CSS中用@font-face声明字体，定义公共类和Unicode内容，通过类名结合伪元素调用。推荐在线方式快捷省事，本地方式适合离线与自定义需求。
在CSS中引入图标库并使用，通常有两种常见方式：通过 <link> 标签引入在线图标库，或使用 @font-face 手动加载本地图标字体文件。下面分别说明这两种方法的具体操作和调用方式。
1. 使用 <link> 引入在线图标库（推荐方式）
这是最简单快捷的方式，适用于主流图标库如 Font Awesome、Google Icons（Material Icons）等。
示例：引入 Google Material Icons在 HTML 文件的 <head> 中添加：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
立即学习“前端免费学习笔记（深入）”；
然后在 HTML 中通过类名或内联元素使用图标：
<i class="material-icons">face</i>
页面会显示“笑脸”图标。这里的 i 标签是语义化占位，你也可以用 span。
示例：引入 Font Awesome 6同样在 <head> 中加入 CDN 链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
使用方式：
<i class="fas fa-home"></i>
显示一个房屋图标。注意不同版本类名可能略有差异。
2. 使用 @font-face 加载本地图标字体
当你需要离线使用图标，或自定义私有图标集时，可下载图标字体包并用 @font-face 引入。
步骤一：下载图标字体包从图标库官网（如 Font Awesome、IcoMoon）下载包含 .woff、.woff2、.ttf 等字体文件的包。
步骤二：在 CSS 中声明 @font-face假设你将字体文件放在 fonts/ 目录下：
@font-face {
font-family: 'MyIconFont';
src: url('fonts/myicons.woff2') format('woff2'),
url('fonts/myicons.woff') format('woff');
font-display: swap;
}
通常通过设置公共类和 Unicode 编码来调用图标：
.icon {
font-family: 'MyIconFont' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
为具体图标定义内容：
.icon-home::before {
content: "\e900";
}
HTML 中使用：
<span class="icon icon-home"></span>
关键注意事项
使用图标字体时需注意以下几点：
- 确保字体文件路径正确，避免 404 错误
- 使用 Unicode 时要用反斜杠转义（如 \e900，不是 e900）
- 设置 font-display: swap 可防止文本闪烁
- 图标字体本质是文字，可用 color、font-size 控制颜色和大小
- 部分图标库已转向 SVG 方案，字体方式逐渐减少，但仍有广泛支持
基本上就这些。选择哪种方式取决于项目需求：在线引用快且省事，本地加载更可控且支持离线环境。根据实际场景灵活选用即可。
