微信小程序引用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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
解决vant的Toast组件时提示not defined的问题
Nov 11 Javascript
详解微信小程序与内嵌网页交互实现支付功能
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
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python 功能和特点(新手必学)
2015/12/30 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
python flask 多对多表查询功能
2017/06/25 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python实现自动登录后台管理系统
2018/10/18 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
业务主管岗位职责
2013/11/20 职场文书
职业女性的职业规划
2014/03/04 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
小学教师师德承诺书
2014/05/23 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2015年班干部工作总结
2015/04/29 职场文书
我的收音机情缘
2022/04/05 无线电