在原生微信小程序中引入iconfont 矢量图标之使用Font class这种方式

目录

一、介绍

1、官网:iconfont-阿里巴巴矢量图标库

二、使用步骤

1、搜索图标添加至购物车

2、将购物车的图标添加至项目

3、点击资源管理中的我的项目

4、点击项目设置

5、字体格式勾选下图选项

6、下载至本地

7、解压压缩包,将解压后的文件全部复制粘贴至项目中并且新建文件iconfont.wxss

8、点击下图中的点此复制代码

9、在浏览器中粘贴上一步复制的代码并回车,全选复制代码粘贴到iconfont.wxss中

10、在app.wxss引入icon.wxss

11、复制代码

12、粘贴在页面中使用

13、成功啦!

欢迎关注VX公众号:前端小知识营地


一、介绍

1、官网:iconfont-阿里巴巴矢量图标库

二、使用步骤

1、搜索图标添加至购物车

2、将购物车的图标添加至项目

3、点击资源管理中的我的项目

4、点击项目设置

5、字体格式勾选下图选项

6、下载至本地

7、解压压缩包,将解压后的文件全部复制粘贴至项目中并且新建文件iconfont.wxss

8、点击下图中的点此复制代码

9、在浏览器中粘贴上一步复制的代码并回车,全选复制代码粘贴到iconfont.wxss中

10、在app.wxss引入icon.wxss

11、复制代码

12、粘贴在页面中使用

<text class="iconfont icon-shouye"></text>

注:iconfont是固定的class搭配,务必不要遗漏哦!

13、成功啦!

欢迎关注VX公众号:前端小知识营地

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐