微信小程序引用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 中关于CSS操作部分使用说明
Jun 10 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
纯js简单日历实现代码
Oct 05 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
JavaScript实现简单进度条效果
Mar 25 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和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python封装对象实现时间效果
2020/04/23 Python
python的正则表达式re模块的常用方法
2013/03/09 Python
django实现前后台交互实例
2017/08/07 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python Celery多队列配置代码实例
2019/11/22 Python
python绘制彩虹图
2019/12/16 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
实习医生自我评价
2013/09/22 职场文书
酒鬼酒广告词
2014/03/21 职场文书
合作协议书怎么写
2014/04/18 职场文书
教师节座谈会主持词
2015/07/03 职场文书
公司周年庆典致辞
2015/07/30 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
nginx配置之并发频次限制
2022/04/18 Servers