CSS 字体图标（Font Icon）是将图标设计为字体的一种方式，它们可以像普通文本一样使用，可以更轻松地修改大小、颜色、阴影、透明度等样式。下面是如何使用 CSS 设置字体图标并给出完整示例的步骤：
- 找到一个适合的字体图标库，比如 Font Awesome 或者 Material Icons，并从它们的网站上下载需要的字体文件和 CSS 文件。
- 在 HTML 中引入字体文件和 CSS 文件，例如：
<link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>
完整示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font Icon Example</title>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style>
.fa {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-heart:before {
content: "\f004";
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<p>I <i class="fa fa-heart"></i> Font Icons</p>
</body>
</html>上面的代码中，我们为 .fa 类设置了 font-family 和其他一些通用样式，为 .fa-heart 类设置了 content 属性来显示具体的图标。将 .fa-heart 类的颜色和字体大小设置为红色和 24px。
正文完