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

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

下载图标

首先在阿里字体图标查找你所需要的图标，然后“添加入库”（类似加入购物车那种）添加至项目（没有项目选择新建项目）

选择unicode，点击“查看在线链接”复制里面的代码



点击“下载至本地”，解压压缩包编辑iconfont.css，将下面标注的内容替换为刚才复制的代码

微信小程序中使用

将修改后的iconfont.css里面的代码全部复制到微信小程序中需要用到的wxss文件中，我的如下：



界面（wxml）中引用：

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

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

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

微信小程序中使用阿里字体图标的更多相关文章

  1. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  2. 微信小程序中使用阿里ICON图标

    由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...

  3. 在微信小程序中使用阿里图标库Iconfont

    首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...

  4. 在微信小程序中引入 Iconfont 阿里巴巴图标库

    小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...

  5. 如何在微信小程序中国引入fontawesome字体图标

    fontawesome官网地址:http://fontawesome.dashgame.com/ 一. 二. 下载之后的字体图标 找到 文件中的如下图.ttf文件 三. 在https://transf ...

  6. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  7. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  8. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  9. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

随机推荐

  1. vim批量在文件每行添加内容以及查询cloudstack模板是否是增量

    一.接着上文(更改cloudstack二级存储),从cloud数据库里查出的所有模板名称以及模板位置语句 SELECT tpl.`name`,img.id, img.`url`,tplref.`ins ...

  2. Cinder Backup备份

    cinder 备份提供了三种驱动服务: Ceph,TSM,Swift 其中默认备份驱动服务为swift cinder 驱动服务的配置在cinder.conf文件中 backup_driver=cind ...

  3. [OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget(第二部分)

    本文译自:http://www.robot-home.it/blog/en/software/tutorial-opencv-qt-opengl-widget-per-visualizzare-imm ...

  4. Python,OpenGL生命游戏

    初学Python和OpenGL,练手的第一个小程序life.py,这个小程序在日后会不断调整,增加类.优化判断及操作 执行效果: 按正规生命游戏的规则: 1.周围生命等于3时产生生命 2.周围生命等于 ...

  5. django之设置缓存

    缓存 一句话总结:缓存可以对view.模板.数据进行缓存可以设置缓存在不同的地方(本地内存.redis.系统文档)可以为服务器节省性能.减少用户等待时间. 对于中等流量的网站来说,尽可能地减少开销是必 ...

  6. 有关DotNetBar设计样式和运行时的样式不一致的问题

    可以在 窗体类构造函数的InitializeComponent后加上下面圈出的内容:  this.EnableGlass = false; 参考文章 DotNetBar如何控制窗体样式

  7. Android中RelativeLayout各个属性

    android:layout_above="@id/xxx"  --将控件置于给定ID控件之上 android:layout_below="@id/xxx"  ...

  8. 管理Entity Framework中的树结构

    很多时候您需要在数据库中存储逻辑树的层次结构.这个问题有很多种实现方式,但最常见的是使用一个简单自关联的表,如下图所示 如果您映射此表与实体框架您将自动获得一个树状结构,您需将关系字段重命名,因为他们 ...

  9. LVM 逻辑卷管理

    简介: LVM ( Logical Volume Manager ) 逻辑卷管理 一.创建 LV 1.首先在你的虚拟机上添加一块新的硬盘用来做实验. 2.安装 lvm : yum -y install ...

  10. jena读取和解析本体文件

    使用jena开发本体应用程序时,首先需要对我们利用本体构建工具,如protege等,构建的本体文件,如owl.rdf等读取并解析得到本体模型.下面给出相应的代码,不对的地方请指正. (基于jena 2 ...