微信小程序引用iconfont图标的方法


Posted in Javascript onOctober 22, 2018

最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是:

@font-face {
 font-family: 'iconfont';
 src: url('iconfont.eot');
 src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 url('iconfont.woff') format('woff'),
 url('iconfont.ttf') format('truetype'),
 url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
 font-family:"iconfont";
 font-size:16px;font-style:normal;
 -webkit-font-smoothing: antialiased;
 -webkit-text-stroke-width: 0.2px;
 -moz-osx-font-smoothing: grayscale;
}

这是往常的写法,但是发现这样的写法要报错,后来查了一下,发现小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用。

方法:

在阿里巴巴图标库下载下来以后,将iconfont.ttf转换即可。转换地址:https://transfonter.org/

这里贴一个简单的步骤:

微信小程序引用iconfont图标的方法
转换后的目录:微信小程序引用iconfont图标的方法
将css文件在外部引入所要用的.wxss文件中即可(@import ‘../../lib/style/lib.wxss';)

最后,就可以使用啦:

.icon:after{
 font-family: 'iconfont';
 font-weight: 500;
 font-style: normal;
 content: '\e698;'
}

总结

以上所述是小编给大家介绍的微信小程序引用iconfont图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
微信小程序排坑指南详解
May 23 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
浅谈React之状态(State)
Sep 19 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
js异步上传多张图片插件的使用方法
Oct 22 #Javascript
js实现动态添加上传文件页面
Oct 22 #Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 #Javascript
js实现动态增加文件域表单功能
Oct 22 #Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 #Javascript
js实现input密码框显示/隐藏功能
Sep 10 #Javascript
You might like
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
护士实习鉴定范文
2013/12/22 职场文书
教学大赛获奖感言
2014/01/15 职场文书
保护环境建议书100字
2014/05/13 职场文书
卖车协议书范文
2016/03/23 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL