小程序中使用阿里图标库iconfont
小程序中使用阿里图标库iconfont
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。
第一步:下载需要的字体图标
进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为:
搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。
点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容:
第二步:转换ttf文件
进入https://transfonter.org/平台,将解压出来的ttf字体文件转化成base64格式。流程如下:
点击下载,得到转换后的压缩包,名为transfonter.org-开头。解压可以得到如下图的几个文件:
第三步:在微信小程序中使用
新建微信小程序,将默认生成的代码删除。
1--在index.css文件中添加样式内容。打开刚刚我们经过转换的解压出来的文件,找到stylesheet.css,将其中的内容全部复制到index.css文件中。注意是转换过的那个文件。
2--打开没有转换过的download.zip解压出来的文件,找到iconfont.css文件,将这个文件中的内容复制到index.css文件中。@font-face这部分不要。
3 --在index.wxml中使用字体图标。代码如下:
<!--index.wxml-->
<view class="container">
个人中心
<text class="iconfont icon-wode" style="font-size:50px;color:red"></text>
</view>
字体图标跟字体一样,可以通过font-size来改变大小,通过指定color来改变他的颜色。
总结:到这里微信小程序的字体图标的使用就完成了,这里经过转换成64位编码之后,直接将样式放在css文件中即可,并不需要引入其他以外的文件。
小程序中使用阿里图标库iconfont的更多相关文章
- 在微信小程序中使用阿里图标库Iconfont
首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...
- vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标
第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...
- 微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
- 微信小程序中使用阿里ICON图标
由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
- 开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
随机推荐
- CentOS-7.3 设置静态 ip
1. VMnet8 必须设置固定 ip,否则会发生:虚拟机可以访问主机和外网,但是主机 windows 却访问不了虚拟机 2. 虚拟网络编辑器设置网关 IP(G): 必须与 VMnet8 的 ip 在 ...
- 通过Shell脚本将VSS项目批量创建并且提交迁移至Gitlab
脚本运行环境:Git Bash 系统环境:Windows 10 Pro 1709 VSS版本:Microsoft Visual SourceSafe 2005 我的VSS工作目录结构如下: D:\wo ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- 洲阁筛 & min_25筛学习笔记
洲阁筛 给定一个积性函数$F(n)$,求$\sum_{i = 1}^{n}F(n)$.并且$F(n)$满足在素数和素数次幂的时候易于计算. 显然有: $\sum_{i = 1}^{n} F(n) = ...
- topcoder srm 615 div1
problem1 link 对于数字$x$,检验每个满足$x=y*2^{t}$的$y$能否变成$x$即可. problem2 link 如果起点到终点有一条长度为$L$的路径,那么就存在长度为$L+k ...
- Oracle基础知识点——Oracle服务端和客户端
Oracle服务端 服务端提供oracle服务的实例,其是数据库的核心,用于数据库的管理,对象的管理与存储.数据的存储.查询.数据库资源的监控.监听等一些服务. 例子:比如一台机子上安装了Oracle ...
- HBase API 基础操作
对于数据操作,HBase支持四类主要的数据操作,分别是: Put :增加一行,修改一行 Delete :删除一行,删除指定列族,删除指定column的多个版本,删除指定column的制定版本等 Get ...
- JS的深度克隆,利用构造函数原型深度克隆
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...
- tomcat 监控脚本
ps -ef |grep tomcat |grep -w 'atlassian'|grep -v 'grep'|awk '{print $2}' curl -s -o /dev/null -m 10 ...
- BZOJ1688|二进制枚举子集| 状态压缩DP
Disease Manangement 疾病管理 Description Alas! A set of D (1 <= D <= 15) diseases (numbered 1..D) ...