微信小程序引用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 EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
javascript生成大小写字母
Jul 03 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue实现简单学生信息管理
May 30 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 MySQL与分页效率
2008/06/04 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
简易js代码实现计算器操作
2013/04/15 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
EasyUI创建人员树的实例代码
2017/09/15 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
开始着手第一个Django项目
2015/07/15 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
保卫科工作岗位职责
2014/03/01 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
车辆委托书范本
2014/10/05 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
开展警示教育活动总结
2015/05/09 职场文书
经销商会议开幕词
2016/03/04 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技