微信小程序引用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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript获取路径设计源码
May 22 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
移动端js触摸事件详解
Sep 18 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 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上传文件常见问题总结
2015/02/03 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
js Math 对象的方法
2013/09/01 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python缩进和冒号详解
2016/06/01 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
聊聊Python中的pypy
2018/01/12 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
python基于event实现线程间通信控制
2020/01/13 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
《口技》教学反思
2014/02/21 职场文书
家长高考寄语
2015/02/27 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
《给予树》教学反思
2016/03/03 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
一起来学习Python的元组和列表
2022/03/13 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang