微信小程序引用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验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JS常用算法实现代码
Nov 14 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
详解Layer弹出层样式
Aug 21 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
JavaScript中的执行环境和作用域链
Sep 04 Javascript
Nest.js散列与加密实例详解
Feb 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 引用是个坏习惯
2010/03/12 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
奇怪的鱼:Weird Fish
2018/03/18 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
公务员的自我鉴定
2013/10/26 职场文书
面试后感谢信
2014/02/01 职场文书
网络管理专业求职信
2014/03/15 职场文书
我的中国梦口号
2014/06/16 职场文书
婚庆公司计划书
2014/09/15 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技