微信小程序引用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 bind事件使用详解
May 05 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
微信小程序实现滑动操作代码
Apr 23 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
基于pear auth实现登录验证
2010/02/26 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
jquery选择器简述
2015/08/31 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
详解vue中axios的封装
2018/07/18 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
客服专员岗位职责范本
2013/11/29 职场文书
小学运动会表扬稿
2014/01/19 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
党员检讨书
2014/10/13 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
python实现层次聚类的方法
2021/11/01 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL