小程序引入阿里图标

阿里巴巴矢量图标库https://www.iconfont.cn/
1、阿里图标库搜索想要的图标，添加至购物车（可添加多个）

图1.jpg

2、点击购物车，将购物车内的图标添加至项目中。选择添加至的项目名称，如无项目，新建项目并确定。

图2-1.jpg

图2-2.jpg

3、选择Unicode，点击 “点此复制代码”

图3-1.jpg

图3-2.jpg

4、在小程序app.wxss中粘贴复制代码，并设置对应的图标Unicode(16进制) 如：.icon-test:before { content: "\e600"; }；可在图标项目中编辑该图标查看对应的16进制码/上图3-2中图标下方显示的后四位为图标的16进制码。

图4-1.jpg

图4-2.jpg

.iconfont {
  font-family: "iconfont" !important;
  font-size: 10vw;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-test:before {
  content: "\e600";
}

5、在应用页面wxml文件中添加；这样图标就被添加进去了。如改变图标颜色可加style属性。

图5.jpg

6、在该项中添加新的图标，按上述步骤选择加入购物车添加至已有的项目，并更新代码。点击复制替换小程序代码。并设置对应的图标。

图6-1.jpg

图6-2.jpg

6-3.jpg

注：如果在app.wxss中设置对应图标时设置图标颜色、大小等，则在页面修改style属性不作用。