通常，我们在写web页面时会遇到很多需要加载小图标的情况。要么用图片要么用字体图标库，很多情况我们需要的图标不是很多，引入整个字体图标库就很多余，于是我们可以自定义自己需要的字体图标。
首先我们登录阿里字体图标库下载自己想要的图标：
在搜索栏搜索自己想要的图标(中英文都可以)
在图标搜索列表，把鼠标移到你想要的图标上，点击添加购物车图标。
选择完你要的图标后，进入右上角购物车下载代码。
打开压缩包，主要的是这两个文件，其他的文件都没啥用。
图标用法
在你的项目中引用这个iconfont.css 文件。
两种使用方式Unicode，font-class
Unicode 的使用方法 ：
挑选字体图标并获取对应字体编码，应用于页面，字体编码为 “&#x” 加上对应类属性content值的后四位。
font-class 的使用方法：
挑选字体图标并获取对应css类名，应用于页面。
代码示例
css部分
@font-face {
font-family: "iconfont"; /* Project id */
src: url('iconfont.ttf?t=1624360096427') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tel:before {
content: "\e618";
}
.icon-mail:before {
content: "\e743";
}
.icon-user:before {
content: "\e6b5";
}
.icon-Success:before {
content: "\e604";
}
.icon-lock:before {
content: "\e7cc";
}
html部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>IcoMoon Demo</title>
<meta name="description" content="An Icon Font Generated By IcoMoon.io">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iconfont.css" rel="stylesheet">
<style>
*{
margin: 10px;
}
.fontclass{
margin-top: 50px;
}
.fontclass .iconfont{
color: red;
font-size: 36px
}
</style>
<body>
<div class="unicode">
<h3>Unicode 引用</h3>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</div>
<div class="fontclass">
<h3>font-class 引用</h3>
<span class="iconfont icon-tel"></span>
<span class="iconfont icon-mail"></span>
<span class="iconfont icon-user"></span>
<span class="iconfont icon-Success"></span>
<span class="iconfont icon-lock"></span>
</div>
</body>
</html>
效果预览