微信小程序引用iconfont图标的方法
更新时间：2018年10月22日 10:24:19 作者：siriva
这篇文章主要介绍了微信小程序引用iconfont图标的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
最近在研究微信小程序，自己写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/
这里贴一个简单的步骤：
转换后的目录：
将css文件在外部引入所要用的.wxss文件中即可（@import ‘../../lib/style/lib.wxss';）
最后，就可以使用啦：
.icon:after{
font-family: 'iconfont';
font-weight: 500;
font-style: normal;
content: '\e698;'
}
总结
以上所述是小编给大家介绍的微信小程序引用iconfont图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Javascript生成器（Generator）的介绍与使用
这篇文章主要给大家介绍了关于Javascript生成器（Generator）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了JS实现判断数组是否包含某个元素,涉及javascript属性操作与正则判断相关使用技巧,需要的朋友可以参考下2019-05-05
这篇文章主要为大家介绍了GoJs面板绘图模板go.Panel使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
JavaScript事件驱动2008-08-08
裁剪图片对我们来说是再熟悉不过的了，最近工作中就又遇到了这个需求，所以想着干脆整理下来，方法大家和自己在需要的时候参考学习，所以这篇文章主要介绍了利用Javascript裁剪图片并存储的简单实现，后端PHP处理我用的是THINKPHP框架，需要的朋友可以参考下。2017-03-03
下面小编就为大家带来一篇老生常谈js动态添加事件--- 事件委托。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
因为php的print_r比较好用同时js却没有这个功能于是自己就写了一个，感兴趣的你可不要错过了哈，希望本文对你提高知识有所帮助2013-02-02
这篇文章主要介绍了基于JavaScript实现的折半查找算法,结合实例形式分析了折半查找的原理、操作步骤及javascript实现折半查找的相关操作技巧与注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了JavaScript用select实现日期控件的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JavaScript生成SQL查询表单的方法,涉及javascript页面元素及字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论