微信小程序如何引入iconfont

1. 在阿里巴巴矢量库官网上将需要使用的图标加入购物车，然后再添加至项目，这里我选择的是Font class ,接下来点击下载至本地。下载之后解压如下图所示哦。

  2. 将css文件换成wxss文件 【注意】

      在自己的项目目录下下，新建一个iconfont目录，将下载之后且修改文件名的文件复制进来，如下图：

    

3.在微信小程序的app.wxss中引入iconfont.wxss文件

@import './iconfont/iconfont.wxss';

 

4.接下来我们回到阿里巴巴矢量库官网，我的项目这里，刚刚下载iconfont的地方，点击下图所示css链接

 复制下图中 @font-face 到iconfont.wxss中进行替换，接下来就万事大吉了！！！可以用了哟。

不执行这一步的话，会有报错哦

报错提示 ：[渲染层网络层错误] Failed to load local font resource /iconfont.ttf?t=1628920868220-do-not-use-local-path-./iconfont/iconfont.wxss&5&7

the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)

(env: Windows,mp,1.05.2107090; lib: 2.19.1)

 

5.用起来 ,这个问题就解决啦

  <view class="iconfont icon-yilingqu" ></view>