微信小程序引用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对象和DOM对象使用说明
Jun 25 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
js 数据类型判断的方法
Dec 03 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python判断操作系统类型代码分享
2014/11/22 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
专题组织生活会方案
2014/06/15 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
先进典型发言材料
2014/12/30 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang