在微信小程序中使用阿里字体图标 ,不通过转换成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. 生成html页面客户端随机数和验证码

    生成随机数: var chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', ...

  2. 移动终端App测试点归纳

    以下所有测试最后必须在真机上完整的执行. 1 安装.卸载测试 1.1 在真机上.第三方软件(xy苹果助手.91.安卓助手)的安装与卸载 1.2 安装在手机卡上 或 SD卡上 (不同的IOS和安卓版本) ...

  3. node全局变量process属性值(mac环境)

    任意新建一个js文件,只需一行代码: console.dir(process); 保存该文件后执行,即可得到process变量的属性值列表: { title: 'node', version: 'v0 ...

  4. BIO模型

    基本模型 代码: 客户端 package bhz.bio; import java.io.BufferedReader; import java.io.IOException; import java ...

  5. tornado异步编程

    说明 以下的例子都有2个url,一个是耗时的请求,一个是可以立刻返回的请求,,我们希望的是访问立刻返回结果的请求不会被其他耗时请求影响 非异步处理 现在我们请求sleep然后同时请求justnow,发 ...

  6. Java中的class为什么要设置访问控制?和C++比较的感悟

    Java中的class为什么要设置访问控制?和C++比较的感悟 在Java中package解决了class的名字空间问题,class的成员都有各自的访问控制符,而class还有两种访问控制符,分别是p ...

  7. C#关于using用法的总结

    1 作为指令,引入命名空间 using 命名空间的名字,这样可以直接使用命名空间中的类型,而不必指定类型的详细命名空间. 2 作为指令,定义别名 using 别名=详细命名空间信息的具体的类型. 3 ...

  8. ABAP内表数据和JSON格式互转

    本程序演示ABAP内表数据如何转为JSON格式,以及JSON数据如何放入内表. 注:json字符串格式如:jsonstr = '[ {flag: "0",message: &quo ...

  9. MyCat的安装及基本使用(MySQL分库分表)

    1.Mycat的简介 1.1 数据库集群产生的背景 如今随着互联网的发展,数据的量级也是成指数的增长,从GB到TB到PB.对数据的各种操作也是愈加的困难,传统的关系性数据库已经无法满足快速查询与插入数 ...

  10. 微信图片反防盗链 用js不太成熟的解决方式 仅供参考

    $("#imgDiv img").each(function () { var img = $(this); var img_src = img.attr("src&qu ...