微信小程序引用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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
webpack proxy 使用(代理的使用)
Jan 10 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仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
javascript实现日历效果
2019/06/17 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
Python上下文管理器和with块详解
2017/09/09 Python
机器学习10大经典算法详解
2017/12/07 Python
Python多继承顺序实例分析
2018/05/26 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
王老吉广告词
2014/03/20 职场文书
初二学习计划书范文
2014/04/27 职场文书
护校行动方案
2014/05/31 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL