微信小程序引用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类代码
Jun 27 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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之第五天
2006/10/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
在html页面中包含共享页面的方法
2008/10/24 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
迎八一活动主题
2014/01/31 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
小学班主任研修日志
2015/11/13 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python