微信小程序中使用iconfont/font-awesome等自定义字体图标
小程序不能识别外部字体文件,但是转换成Base64就可以使用字体图标了。
以阿里巴巴的iconfont为例
1.下载图标
先去官网下载喜欢的图标==》

下载解压后的文件夹==》

2.在线转换
打开https://transfonter.org/这个网站,将ttf格式的图标文件转换为base64的

完成之后,下载

3.添加css文件
下载好之后的css文件

复制到需要引用的wxss文件中(全局调用就放到app.wxss中);
复制原始css文件中的以下内容到上面的相同文件中:

4.调用

效果:

备注:
关于第三步:
不一定全局引用复制;也可以单独注册成wxss文件,@import引入;
关于第四步:
引用方式很多,不限于以上示例方式~
微信小程序中使用iconfont/font-awesome等自定义字体图标的更多相关文章
- 如何在微信小程序中使用iconfont
开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
- 在微信小程序中引入 Iconfont 阿里巴巴图标库
小程序的代码包不能超过4M,为了压缩代码包的大小,可以通过第三方链接引入图标资源 Iconfont 无疑是最常用的第三方图标库,这里介绍一下在微信小程序引入 Iconfont 的方法 一.下载图标 首 ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 微信小程序中使用阿里字体图标
在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...
- 如何在微信小程序中使用阿里字体图标
第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 ---> 点击“添加入库” ...
- 网页或微信小程序中使元素占满整个屏幕高度
在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...
- 在微信小程序中使用富文本转化插件wxParse
在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...
- 微信小程序中发送模版消息注意事项
在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...
- 微信小程序中placeholder的样式
通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...
随机推荐
- py-day1-2 python的循环语句
死循环: 条件循环: 练习 第一题: n = 1 while n < 11: if n == 7: pass else: print(n) n = n + 1 print('-----end-- ...
- ASP.NET AJAX入门系列(3):使用ScriptManagerProxy控件
在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时, ...
- BT.656 NTSC制式彩条生成模块(verilog)
BT.656 NTSC制式彩条生成模块(verilog) 1.知识储备 隔行扫描是将一副图像分成两场扫描,第一场扫描第1,2,5,7...等奇数行,第二场扫描2,4,6,8...等偶数行,并把扫奇数行 ...
- excel技巧--多行排成单列
要将上图的多行排成单列的效果,做法如下: 1.在倒数第二列的下方单元格,写入=号,然后再点击倒数第一列第一个单元格.这样复制该单元格的公式. 2.然后对着这个复制好的单元格的右下角一直往下拖拉,尽量拖 ...
- VS2013编译Qt5.2.1 32位静态库debug-and-release版及结果分享
1. 下载zip源码,我下载的是qt-everywhere-opensource-src-5.2.1.zip这个文件. 2.安装python 3.解压缩qt-everywhere-opensource ...
- phoenix初步
更新系统包管理工具hex mix local.hex 安装phoenix,phoenix是elixir的web框架 mix archive.install https://github.com/pho ...
- [原抄] Potplayer 1.7.2710 快捷键
对着软件一个一个抄下来的. 打开文件:Ctrl+O[F3] / 简索文件:F12 / 最后文件 Ctrl+Y / 关闭:F4 打开摄像头:Ctrl+J / 打开DVD设备 Ctrl+D 播放.暂停:空 ...
- 正则判断 文件名是否为zip格式
var type = filename.match(/^(.*)(\.)(.{1,8})$/)[3].toUpperCase();
- 基于无锁队列和c++11的高性能线程池
基于无锁队列和c++11的高性能线程池线程使用c++11库和线程池之间的消息通讯使用一个简单的无锁消息队列适用于linux平台,gcc 4.6以上 标签: <无> 代码片段(6)[ ...
- uoj#119. 【UR #8】决战圆锥曲线
http://uoj.ac/problem/119 可以认为数据基本随机,于是可以直接用线段树维护,对每个询问在线段树上进行剪枝搜索. #include<bits/stdc++.h> ty ...