脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序引用iconfont图标

微信小程序引用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缺少insertAfter解决方案

    JavaScript缺少insertAfter解决方案

    这篇文章主要介绍了JavaScript缺少insertAfter解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • html+javascript+bootstrap实现层级多选框全层全选和多选功能

    html+javascript+bootstrap实现层级多选框全层全选和多选功能

    想做一个先按层级排序并可以多选的功能，首先倾向于用多层标签式的，直接选定加在文本域里，接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能，需要的朋友参考下
    2017-03-03
  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。
    2015-05-05
  • js文本框走动跑马灯效果代码分享

    js文本框走动跑马灯效果代码分享

    这篇文章主要介绍了js文本框跑马灯效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • 解析dom中的children对象数组元素firstChild,lastChild的使用

    解析dom中的children对象数组元素firstChild,lastChild的使用

    以下是对dom中的children对象数组元素firstChild,lastChild的使用进行了详细的分析介绍，需要的朋友可以参考下
    2013-07-07
  • JS比较两个数值的大小实例

    JS比较两个数值的大小实例

    下面小编就为大家带来一篇JS比较两个数值的大小实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 微信小程序点击列表跳转到对应详情页过程解析

    微信小程序点击列表跳转到对应详情页过程解析

    这篇文章主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js中断 forEach 循环的方法汇总

    js中断 forEach 循环的方法汇总

    这篇文章主要介绍了js中断 forEach 循环的几种方法,主要方法还是通过其它方式代替 forEach 循环的中断,只有方法4 使用 try-catch 结构是实际意义上中断 forEach 循环,需要的朋友可以参考下
    2023-10-10
  • js实现验证码干扰(动态)

    js实现验证码干扰(动态)

    这篇文章主要为大家详细介绍了js实现验证码干扰，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • JS解决iframe之间通信和自适应高度的问题

    JS解决iframe之间通信和自适应高度的问题

    关于iframe之间的通信问题与自适应高度问题网上有很多，那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题，有需要的可以参考借鉴。
    2016-08-08

最新评论