字体图标是一种利用字体文件中的特定符号来呈现图标和符号的技术。这种技术的优势在于可以通过 CSS 来轻松地控制图标的大小、颜色等属性，而且不需要额外的图片文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标的使用</title>
<!-- 下载字体图标：SVG格式 -->
<!--
推荐网站：https://icomoon.io/
1、第一步：点击右上角 IcoMoon App 按钮。
2、页面跳转后，点击选择需要的字体图标，然后点击右下角的 Generate Font，就可以看到所有选择的字体图标。
3、点击页面右下角的 Download，将所有字体图标下载下来。
4、解压下载的文件，将其中的 fonts 文件夹复制到项目中。
5、在 head 里的 style 里导入字体图标（见 @font-face 部分内容）。
6、在解压出的文件中，打开 demo.html 文件，需要用哪个字体图标，就复制字体图标右下方的小方框。
7、将小方框粘贴到需要使用字体图标的标签中，见 body 中第一个标签 span。
8、对标签设置 CSS，见下方的 span{} 内。
9、第二种方法使用字体图标：写一个标签，比如 div 标签，见 body 中的第二个标签 div
10、复制字体图标左下方的一串字母，然后在 head 中 style 里给 div 添加 css，见下方的 div 内
-->
<style>
/* 导入字体图标 */
@font-face{
font-family: "icomoon"; /* 这里的字体名称可以随便修改 */
src: url("fonts/icomoon.eot?7kkyc2");
src: url("fonts/icomoon.eot?7kkyc2#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?7kkyc2") format("truetype"),
url("fonts/icomoon.woff?7kkyc2") format("woff"),
url("fonts/icomoon.svg?7kkyc2#icomoon") format("svg");
font-weight: normal;
font-style: normal; /* 让字体倾斜正常 */
}
span{
font-family: "icomoon"; /* 这行必须有，下面两行可有可无 */
font-size: 25px;
color: pink;
}
div.zititubiao::after{
font-family: "icomoon";
content:"\e910";
}
</style>
</head>
<body>
<!-- 使用字体图标 -->
<span></span>
<!-- 使用字体图标 -->
<div class="zititubiao"></div>
</body>
</html>