微信小程序引用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 28 Javascript
JS字符串处理实例代码
Aug 05 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 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中字符集转换iconv函数使用总结
2014/10/11 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php单一接口的实现方法
2015/06/20 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python中遍历文件的3个方法
2014/09/02 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
人力资源管理专业自荐书范文
2014/02/10 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers