51dev.com IT技术开发者社区

51dev.com 技术开发者社区

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

Css互联网报道27842017-06-01 收藏0次评论

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

下载图标

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

微信小程序中使用

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

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

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

以上就是微信小程序中使用阿里字体图标的全部内容,请多关注【51DEV】IT技术开发者社区。

相关内容