CSS 伪类字体图标（CSS Pseudo-Element Icon Fonts）是一种在网页中使用字体作为图标的方法。相比于使用图片，这种方法的优点是可以更方便地改变图标的颜色和尺寸，并且加载速度更快。下面就让我们来介绍一下如何使用 CSS 伪类字体图标。

.icon-heart:before {
font-family: "Font Awesome 5 Free";
content: "\f004";
}

首先，要使用 CSS 伪类字体图标，我们需要找到一个包含字体图标的字体库。目前比较流行的字体库有 Font Awesome、Material Design Icons 和 Ionicons 等等。我们需要将字体库文件下载并引入到网页中。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-5NfT0CfA9oanI0KxTl7b5UwAf6gK6NfzFFRY3H+RD33vaDsfIM+xIkKTMIkgIGBu" crossorigin="anonymous">

接下来，我们需要定义一个 CSS 类，将伪类应用到想要使用的 HTML 元素上。例如，我们想要在一个图标按钮上使用一个叫做“心”的图标，可以这样写：

<button class="icon-button"><i class="icon-heart"></i></button>

其中，“icon-button”类需要定义样式以设置按钮的样式，并且添加一个“position: relative”属性，以便后面调整图标的位置。“icon-heart”类需要使用伪类“:before”来设置图标，并将其“position”属性设置为“absolute”以便和按钮进行精确定位。我们在“content”属性中使用 Unicode 编码来显示心形图标。

最后，我们可以使用 CSS 来控制伪类字体图标的大小、颜色、hover 效果等等。下面是一个例子：

.icon-button {
position: relative;
background-color: #008CBA;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
}
.icon-heart:before {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-family: "Font Awesome 5 Free";
content: "\f004";
}
.icon-button:hover {
background-color: #005E7E;
}

以上就是使用 CSS 伪类字体图标的基本方法，希望本文能够对你有所帮助。