在微信小程序中使用阿里字体图标 ,不通过转换成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. SET STATISTICS IO

    SET STATISTICS IO (Transact-SQL) https://technet.microsoft.com/zh-cn/library/ms184361(SQL.90).aspx 如 ...

  2. 如何用xMind打开.mmap文件

    首先右键单击mmap格式文档,选择“属性” > “更改了打开方式” > 选择使用Xmind软件打开.然后双击mmap格式文档,就可以用Xmind打开了!

  3. SQL Server此数据库没有有效所有者

    一般此问题出现在还原外部数据库文件的时候,是因为还原的时候本机数据库没有所还原数据库中的用户. 1.选中所还原数据库,安全->用户,删除没有的用户. 2.选中所还原数据库,右键属性->文件 ...

  4. 为什么KVM计算机点无故重启?

    一.故障1:机器hangs 本地一台cloudstack计算节点无故连不上了,cloudstack也坏了,后查看有一台系统虚拟机在这台计算节点上,导致cs挂了.去找到这台机器后,发现这台机器卡住了,重 ...

  5. OD 实验(十一) - 对一个程序的破解

    程序: 点击安装程序 这是一个拼图程序 点击 Options -> Flash Sizes 程序会提示是未注册版本 点击一些选项的时候会提示该程序只给注册的用户 点击 Register 随便输入 ...

  6. C++中的运算符重载练习题

    1.RMB类 要求: 定义一个RMB类 Money,包含元.角.分三个数据成员,友元函数重载运算符‘+’(加)   和 ‘-’(减),实现货币的加减运算     例如:    请输入元.角 分:    ...

  7. 十年Java架构师分享

    看到一篇十年java架构师分享需要掌握的技术点,有时间对照一下,好好学习一下. ------------------------------------------------------------ ...

  8. mysql 里的 ibdata1 文件不断的增长

    我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题.当监控服务器发送一个关于 MySQL 服务器存储的报警时,恐慌就开始了 —— 就是说磁盘快要满了.一番调查 ...

  9. 关于OpenGL Framebuffer Object、glReadPixels与离屏渲染

    最近写论文需要用到离屏渲染(主要是因为模型太大普通窗口绘制根本做不了),于是翻阅了红宝书查了下相关api和用法.中文版的红宝书可读性有点差,很多地方翻译地晦涩,但好歹读起来比较快,主要相关章节为第8章 ...

  10. 远程Servie通信AIDL

    不可以直接通过binder了. 1.先编写一个aidl文件,里边包含我们要通信的方法.(Android studio 有直接新建AIDL选项) interface myInterface { /** ...