在微信小程序中使用阿里字体图标 ,不通过转换成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. RAC的时间同步问题

    今天在两个节点上面安装RAC,在安装clusterware的时候OUI总是提示失败.查到资料的得知: 特此记录: 需要在在所有的集群节点上设置正确的日期和时间 在安装 Oracle 集群件.数据库以 ...

  2. msyqld 的 The user specified as a definer ('root'@'%') does not exist 问题

    msyqld 的 The user specified as a definer ('root'@'%') does not exist 问题 造成问题:搭建网站时显示内容不完整. 跟踪tomcat日 ...

  3. yum ftp本地源

    一. 准备工作1. 安装系统centos7.32. 环境 10.10.10.14 controller-1 10.10.10.15 computer-1 3. 在14主机上安装FTP服务yum ins ...

  4. HTTP之Tcp/Ip协议的工作原理

    计算机与网络设备要相互通信,双方就必须基于相同的方法.比如,如何探测到通信目标.由哪一边先发起通信.使用哪种语言进行通信.怎样结束通信等规则都需要事先确定.不同的硬件.操作系统之间的通信,所有的这一切 ...

  5. 多线程环境下的UI异步操作

    转自原文 多线程环境下的UI异步操作 解决VS中,线程间不可互操作的问题,一揽子解决方案: 一.首先,定义一个类:SetControlProperty using System.Reflection; ...

  6. IP流量重放与pcap文件格式解析

    (作者:燕云   出处:http://www.cnblogs.com/SwordTao/ 欢迎转载,但也请保留这段声明,谢谢!)   君不见 黄河之水 天上来 奔流到海不复回   君不见 高堂明镜 悲 ...

  7. c++Builder Delphi XML 解析例子

    XMLDocument; Xml.XMLIntf.hpp Xml.XMLDoc.hpp #include "Xml.Win.msxmldom.hpp" XMLDocument控件 ...

  8. Django 实现用户认证set_Cookie

    当用户通过认证时,set_Cookie(key, value) request.Cookie.get(key) 如果key不为空,就说明验证通过,否者重新跳转回login登录页面 对于URL urlp ...

  9. C++异常处理(转)

    引言 异常,让一个函数可以在发现自己无法处理的错误时抛出一个异常,希望它的调用者可以直接或者间接处理这个问题.而传统错误处理技术,检查到一个局部无法处理的问题时: 1.终止程序(例如atol,atoi ...

  10. PHP - 输出缓存 - 关于ob系列函数和flush函数

    偶然机会看到了flush().知道他的神奇功能可以用在异步传输的comet 模式之后,于是我去试了试这个方法.然后翻手册去看了看什么意思.发现它神奇的和ob类函数在一起.有点好奇,先放一放,来说flu ...