< p>在前端开发中，icon图标的使用越来越广泛。CSS伪元素是在一个元素内部生成一个虚拟的元素，我们可以利用它来添加一些具有代表性的图形元素。< /p>< p>在CSS中，使用 ::before 和 ::after 伪元素来创建icon图标，这两个伪元素分别在目标元素的前面和后面生成一个虚拟的元素。我们只需要将伪元素的内容属性设置为 unicode 码或者是 CSS 中的图标字体库就可以将一个元素变成一个 icon 图标。< /p>< pre>.icon::before {
content: "unicode码";
}< /pre>< p>其中 unicode 码可以是 CSS 中的特殊字符或用 &#x 标记的 Unicode 编码，如  代表了一个图标码。如果使用的是图标字体库，我们需要在样式文件中将字体库链接并使用 font-family 设置字体名称，这样就可以直接引用该字体库中的图标。< /p>< pre>.icon::before {
content: "";
font-family: 'fontAwesome';
font-style: normal;
font-weight: normal;
speak: none;
text-align: center;
font-size: 36px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
width: 36px;
height: 36px;
}< /pre>< p>在这个例子中，我们选择了 fontAwesome 这个字体库，并且给伪元素设置了一些常用属性，如字体大小、宽度、高度等等。这样就可以轻松地生成一个 icon 图标了。< /p>< p>CSS伪元素的 icon 图标不仅使用方便，而且可以在不增加 DOM 元素的情况下为网站或应用程序添加一些小的装饰元素。希望大家在实际的项目中能够多加使用。< /p>