微信小程序中使用自定义图标(阿里icon)的方法

weui提供的图标比较少,有时我们需要更多的图标,可以使用以下方法自定义图标库:

1,到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,下载代码,解压,打开iconfont.css

2,在wxss文件中引用字体

<style type="less">
@font-face {
  font-family: 'iconfont';
  src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype'),
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fanhui:before { content: "\f0343"; }
.icon-gengduo:before { content: "\f0344"; }
</style>

3,使用字体

<view class="iconfont icon-fanhui">
      返回
</view>
<view class="iconfont icon-gengduo">
      更多
</view>

4,效果图

总结

以上所述是小编给大家介绍的微信小程序中使用自定义图标(阿里icon)的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对菜鸟教程(cainiaojc.com)网站的支持!

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。