微信小程序引用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 网页跳转的方法
Dec 24 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
详细分析React 表单与事件
Jul 08 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实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JS日历 推荐
2006/12/03 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
js获取域名的方法
2015/01/27 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python基于event实现线程间通信控制
2020/01/13 Python
python变量的作用域是什么
2020/05/26 Python
python如何支持并发方法详解
2020/07/25 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
业务副厂长岗位职责
2014/01/03 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
公开承诺书格式
2014/05/21 职场文书
某某同志考察材料
2014/05/28 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
防溺水主题班会教案
2015/08/12 职场文书
中学团支部工作总结
2015/08/13 职场文书
防震减灾主题班会
2015/08/14 职场文书
python使用glob检索文件的操作
2021/05/20 Python
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server