小程序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';
  1. 目标wxml使用

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

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

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容