微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成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表示结束时间的图标
注:如何区分是哪个图标?可以在阿里图标“我的项目”中根据图标文字下面的&#后面的代码进行区分
微信小程序中使用阿里字体图标的更多相关文章
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
- 微信小程序中使用阿里ICON图标
由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...
- 在微信小程序中使用阿里图标库Iconfont
首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 如何在微信小程序中国引入fontawesome字体图标
fontawesome官网地址:http://fontawesome.dashgame.com/ 一. 二. 下载之后的字体图标 找到 文件中的如下图.ttf文件 三. 在https://transf ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...
- 微信小程序中图片上传阿里云Oss
本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
随机推荐
- Svg 和 canvas的区别
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- ceph中用sgdisk工具进行分区--------固定uuid
ceph中两种类型分区的type code: type type code journal 45b0969e-9b03-4f30-b4c6-b4b80ceff106 osd 4fbd7e29-9d25 ...
- day9-Memcached & Redis使用
Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
- Mysql进行复杂查询
1.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: (1)获取所有选了 生物 课程的学生的成绩(学号,成绩) --临时表 (2)获取所有选了 物理 课程的学生的成绩(学号,成绩 ...
- REST 规范
DRF之REST规范介绍及View请求流程分析 DRF之解析器组件及序列化组件 DRF - 序列化组件(GET/PUT/DELETE接口设计).视图优化组件 DRF之权限认证频率组件 DRF之注册器响 ...
- java设计模式之责任链模式(Chain of Responsibility)
转自:http://www.cnblogs.com/java-my-life/archive/2012/05/28/2516865.html 在阎宏博士的<JAVA与模式>一书中开头是这样 ...
- xUtils怎么post请求上传字符串
xUtils算是一个非常实用老牌的框架了,但是有些情况,特别是网络请求部分,总是不太方便.需要折腾下才了解用法.今天来聊聊网络模块的用法. 其实看例子就明白了,post JSON数据也是一样道理,这里 ...
- Mysql EXPLAIN列的解释
转自:http://blog.chinaunix.net/uid-540802-id-3419311.html explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择 ...
- 第2章地址Address(WCF全面解析3)
WCF顾明思义,就是在Windows平台下解决通信(C,Communication)的基础框架(F,Foundation)问题. 终结点是WCF最为核心的对象,因为它承载了所有通信功能.服务通过相应的 ...
- js对象的几种创建方式和js实现继承的方式[转]
一.js对象的创建方式 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); ...