使用CSS :before伪元素结合content属性可在不修改HTML的情况下为元素添加图标。1. 基本语法中，:before在元素内容前插入虚拟子元素，通过content定义内容，如.text:before { content: "★"; }可插入星号。2. 结合Font Awesome等图标字体，通过Unicode编码（如\f007）和font-family指定字体，实现专业图标展示，例如.user-icon:before设置图标并调整样式。3. 可直接使用系统支持的Unicode符号，如✉或\2713（对勾），无需额外字体文件。4. 注意content必须存在，伪元素默认为行内，需设display以控制布局，配合position可实现复杂效果，并确保字体正确加载及font-weight设置准确。此方法适用于列表、链接等场景的装饰性图标添加。
使用 CSS 的 :before 伪元素结合 content 属性，可以很方便地在元素前插入图标，而无需修改 HTML 结构。这种方式常用于添加装饰性图标，比如列表项前的图标、链接旁的小标志等。
1. 基本语法与原理
:before 会在选中元素的**内容之前**插入一个虚拟子元素，通过 content 属性定义插入的内容。虽然它不能创建真正的 DOM 节点，但可以设置样式，包括颜色、大小、字体等。
常用写法：.icon:before {
content: "★";
margin-right: 8px;
color: gold;
}
这样就在每个应用该类的元素前插入了一个金色星号。
2. 使用字体图标（如 Font Awesome 或自定义图标字体）
更常见的是结合图标字体来显示专业图标。以 Font Awesome 为例：
立即学习“前端免费学习笔记（深入）”；
- 引入 Font Awesome 字体文件（可通过 CDN）
- 查找对应图标的 Unicode 编码（例如：\f007 表示用户图标）
- 使用 font-family 指定图标字体
.user-icon:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 16px;
color: #333;
margin-right: 6px;
}
在 HTML 中只需写：<span class="user-icon">用户名</span>，前面就会自动出现用户图标。
3. 使用 Unicode 符号或特殊字符
如果不引入字体，也可以直接用系统支持的 Unicode 字符做简单图标：
.email:before {
content: "✉";
margin-right: 5px;
color: red;
}
或者使用 UTF-8 编码形式：
.tick:before {
content: "\2713"; /* 对勾符号 */
color: green;
margin-right: 4px;
}
4. 注意事项与技巧
-
content 属性必须存在，否则 :before 不生效。即使为空也要写成
content: ""; - 插入的伪元素是行内元素，若需宽高或定位，应设置
display: inline-block或block - 可配合 position 实现更复杂的图标布局，比如绝对定位的小徽标
- 注意字体加载问题，确保图标字体正确加载并声明
font-weight（如 Font Awesome 的实心图标需要 900）
基本上就这些。掌握 :before 与 content 的搭配，能让你在不改动结构的前提下灵活添加视觉元素，尤其适合小图标、标记符号等场景。关键是选对内容来源——文字字符、Unicode 符号，或专业的图标字体。
