iconfont中有些库的版权问题不是特别清晰,如若需要请联系作者。
首先进入iconfont,登录你的账号。
B8QCXTAGJED}DLS8U1JV5

在这里选择你所要的图标库
image-20220123165111800

这里有三个选项,购物车收藏和直接下载。如果要通过图标字体的方式来引入图标,需要点击购物车。
注:如果需要彩色的图标请通过图片引入。
选好你要的图标后点击右上角的购物车
image-20220123165340414

之后点击添加至项目,并新建一个项目
image-20220123165509681

之后在资源管理->我的项目中就可以找到你添加的项目
image-20220123165704491

image-20220123165724734

注意这里要选择我的项目。然后点击下载至本地下载项目。
image-20220123165858630

打开下载后的文件是这样的
image-20220123170038319

这里的html是使用说明书,直接看就可以了把除了html外的文件放入到所需的文件夹中
之后的引入方式就和fontawesome一样了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./ali/iconfont.css">
    <style>
        i.iconfont{
            font-size: 100px;
            /* 让图标变大能看的见 */
        }
        p::before{
            content: '\e602';
            /* 这里的编码就是实体的编码x后面,记得加\ */
            font-family:iconfont;
            /* 定义的字体组名为iconfont */
            font-size: 100px;
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe602;</i>
    <!-- 通过实体的方式引入,转义在html中可以查询 -->
    <i class="iconfont icon-aichegujiabeifen12"></i>
    <!-- 通过类的方式引入 -->
    <p></p>
    <!-- 通过伪类来引入 -->
</body>
</html>

在微信小程序中使用

前面操作差不多,首先点击font class
2022411-02
然后点击查看在线链接。
2022411-01
复制代码到网页中打开,将里面的内容全部复制。然后在小程序的styles属性中新建一个iconfont.wxss文件,将代码复制到文件中。
最好在app.wxss中添加以下代码,引入字体库,确保在整个程序中可以使用

@import "./styles/iconfont.wxss";

Q.E.D.