在微信小程序中使用阿里字体图标 ,不通过转换成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. 下载pubmed数据

    1 import requests 2 import json 3 4 search_url = "https://eutils.ncbi.nlm.nih.gov/entrez/eutils ...

  2. Linux 上通过binlog文件 恢复mysql 数据库详细步骤

    一.binlog 介绍 服务器的二进制日志记录着该数据库的所有增删改的操作日志(前提是要在自己的服务器上开启binlog),还包括了这些操作的执行时间.为了显示这些二进制内容,我们可以使用mysqlb ...

  3. C和指针 第三章--数据

    简要概述: <C和指针>第三章对数据进行了描述. 其中主要讲解了---变量的三个属性:作用域.链接属性和存储类型. 这三个属性决定了该变量在“什么地方可以使用”以及“该变量的值能够保持多久 ...

  4. VRF实例说明

    Virtual Routing Forwarding       VPN路由转发表,也称VPN-instance(VPN实例),是PE为直接相连的site建立并维护的一个专门实体,每个site在PE上 ...

  5. Spring源码研究--下载-编译-导入eclipse-验证

    一,环境配置 操作系统:Unbutu14.04LTS JDK: 1.8.0_40 git: 1.9.1 gradle: 2.2.1 二,源码下载-编译-导入eclipse-验证 1,下载 使用git直 ...

  6. python 协程 gevent 简单测试

    串行测试 from gevent import monkey; monkey.patch_all()#有IO才做时需要这一句 import gevent import requests,time st ...

  7. java算法 第七届 蓝桥杯B组(题+答案) 5.抽签

    5.抽签  (代码填空) X星球要派出一个5人组成的观察团前往W星.其中:A国最多可以派出4人.B国最多可以派出2人.C国最多可以派出2人..... 那么最终派往W星的观察团会有多少种国别的不同组合呢 ...

  8. preview放大镜

    [preview放大镜] preview有放大镜功能,放`键即可(键盘左上角,1左边的键).

  9. Mysql 查询今天的某些时间之外的数据

    SELECT * FROM `attendancealert` WHERE DATE_FORMAT(FROM_UNIXTIME(UNIX_TIMESTAMP(`AlertTime`)),'%Y-%m- ...

  10. jmeter压力测试的简单实例+badboy脚本录制

    JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...