微信小程序中使用阿里字体图标

技术知识
0 1644
小师傅 小师傅2018-07-09
积分:2386

在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现。

为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标。

下载图标

首先在阿里字体图标查找你所需要的图标,然后“添加入库”(类似加入购物车那种)添加至项目(没有项目选择新建项目)1.png选择unicode,点击“查看在线链接”复制里面的代码 
2.png点击“下载至本地”,解压压缩包编辑iconfont.css,将下面标注的内容替换为刚才复制的代码 
3.png

微信小程序中使用

将修改后的iconfont.css里面的代码全部复制到微信小程序中需要用到的wxss文件中,我的如下: 
4.png界面(wxml)中引用:

<text class="iconfont icon-begindate">{{begindate}}</text>//icon-begindate表示开始时间的图标<text class="iconfont icon-enddate">{{enddate}}</text>//icon-enddate表示结束时间的图标12

注:如何区分是哪个图标?可以在阿里图标“我的项目”中根据图标文字下面的&#后面的代码进行区分 
5.png


字数统计
精选帖子
Android 可可影视 v3.3.6无广告纯净版 1061
Android QQ音乐 v11.3.7 定制版解锁免费听歌无广告版 1718
Android 草图大师SKP v1.5 解锁会员版 7115
Android OmoFun追漫神器 v4.2.1 无广告绿色版 4186
AdobeGenP Adobe全家桶系列激活工具 v3.5.0/3.4.14.1 绿色版 4802
Android 七猫免费听书 v1.4 解锁高级版 3002
超良心的抢票神器——Bypass1.16 2408
Android 玲珑加速器 v6.10.9.40 解锁无限时间 1602
Android 大师兄影视 v3.3.8 去广告会员版 735
热门帖子
超高网速梯子软件推荐:8款好用的梯子软件免费与付费全包含 3721
0撸项目天花板,日入200+,新手小白秒上手,一部手机即可操作 2033
最新游戏搬砖项目,小白纯手机可操作,不用挂机玩游戏,日入300+ 1499
24小时Ad圈子懂广告挂机 单机单日500+可矩阵式放大 设备越多 收益越大… 698
最强零撸上线,多做多得,不费时间,操作简单 每天几分钟 单号每日可撸10+ 636
最新抖音无人直播撸音浪独家9.0玩法,防封智能黑科技,新手当天日入2000+ 520
25年抖音口播新玩法:零粉丝也能日引500+创业粉,不出镜拍摄保姆级教程… 470
【公众号托管 】我提供文章,你领取发布,每天5分钟,最高月入2W+ 216
情感背调,一天三条视频,现抖音火爆玩法,一天轻松500+ 112