小程序Font class方式引入阿里矢量图库iconfont

• 材料

  • github账号或者微博账号【阿里大佬请略过】
  • 手

• start

1. 登陆阿里云

2. 创建项目

3. 挑选心仪的icon到项目

4. 下载项目并解压

   
   
   image.png

5. 将iconfont.css放置在小程序中，并修改后缀为wxss，否则编译错误

   
   
   image.png

6. 在app.wxss中全局引入，也可在目标页面单独引入

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

7. 目标wxml使用

注1：icon-xxx为你在iconfont.css自定义的名称，类似

/* 测试相机图标，修改颜色通过color即可 */

.iconzhaoxiangji-copy:before {
  content: "\e602";
}

.iconzhaoxiangji-copy1:before {
  content: "\e603";
}

.iconzhaoxiangji:before {
  content: "\e601";
  color: red;
}

注2：每次更新新的图标需要重新引用下载，如果新加的图标不需要使用，则可以不更新