微信小程序引用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 相关文章推荐
jquery checkbox实现单选小例
Nov 27 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
thinkphp分页实现效果
2016/10/13 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Flask数据库迁移简单介绍
2017/10/24 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python读写zip压缩文件的方法
2018/08/29 Python
python之消除前缀重命名的方法
2018/10/21 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Python列表如何更新值
2020/05/27 Python
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
签约仪式主持词
2014/03/19 职场文书
化工专业自荐书
2014/06/16 职场文书
授权委托书
2014/09/17 职场文书
见习报告的格式
2014/11/04 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
小学班级口号大全
2015/12/25 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
ant design charts 获取后端接口数据展示
2022/05/25 Javascript