当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序中使用自定义图标（阿里icon）的方法

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

2018年09月26日  | 移动技术网IT编程  | 我要评论

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

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

2，在wxss文件中引用字体

<style type="less">
@font-face {
  font-family: 'iconfont';
  src: url(data:font/truetype;charset=utf-8;base64,aaeaaaanaiaaawbqrkzutythwtuaaafiaaaahederuyakqamaaahqaaaab5puy8yvuzh6qaaavgaaabwy21hcaa8d8saaahiaaabemdhc3d//wadaaahoaaaaahnbhlmev6+kaaaa1qaaageagvhzbiv3ikaaadcaaaanmhozwehnwogaaabfaaaacrobxr4dyeabaaaabaaaaawbg9jyqe4ajwaaaneaaaadm1hehabfqbdaaaboaaaacbuyw1lkeyrvqaabngaaakicg9zdkloo7kaaadgaaaapqabaaaaaqaabauj018pppuacwqaaaaaanerzryaaaaa15hnfgas/8adwqnaaaaacaacaaaaaaaaaaeaaaoa/4aaxaqaaaaaaapbaaeaaaaaaaaaaaaaaaaaaaafaaeaaaagafeabqaaaaaaagaaaaoacgaaap8aaaaaaaaaaqp4azaabqaaaokczaaaai8ciqlmaaab6wayaqgaaaiabqmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaugzfzabaahj//woa/4aaxaoaaiaaaaabaaaaaaaabaaaaaaaaaabvqaaa+kalaqaaeab4waaaaaabqaaaamaaaasaaaabaaaaewaaqaaaaaadaadaaeaaaasaamacgaaaewabaagaaaabaaeaaeaaab4//8aaab4////iwabaaaaaaamaaaaaaaoaaaaaaaaaaiaaab4aaaaeaaaaamadwndaa8draaaaaqaaaegaaabaaaaaaaaaaecaaaaagaaaaaaaaaaaaaaaaaaaaeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab2ajwawgaaaaualp/ha7wdgaatacgamqbeafaaaaegkweidgidasennc4ckweviquvfxqoaycjjyehiyiuaz0bfyigfbyynjqmfwyhbg8bdgeeatmhmjynlginatu0pgi7atiwhqebgrsauxilhbidkaekgccehf5kaqibfr8jha8+lf5jld8umiatchcmehizehkmcayfbqgcagqpdgftfxyjbqkkbv6kbq8afbwfkqifaqwzjxpmwq0ggxjhidruhsuxcqebgiabexsgdqc/erorerorfbowexizbxancbgadsmkfaf35asyewwdjumaaaaaaqba/8achgnaabeaaaujaty0jiihaqyxbhcbfji2naiv/ncbiqkugqr+zascagsbnaozfakbiqgjchotcf5kcw8qdp5kcrqzaaaaaaeb4//aa8edqaaraaafcqemndyyfwewbxyhaqyijjqb7qgj/nckfbojazwlagil/mqjghqjaykbiqoaewn+zaspeaz+zakugqaaaaaaabia3gabaaaaaaaaabualaabaaaaaaabaagavaabaaaaaaacaacabqabaaaaaaadaagahwabaaaaaaaeaagaogabaaaaaaafaasawwabaaaaaaagaaga4qabaaaaaaakacsbqgabaaaaaaalabmblgadaaeecqaaacoaaaadaaeecqababaaqgadaaeecqacaa4axqadaaeecqadabaadqadaaeecqaeabaakaadaaeecqafabyaqwadaaeecqagabaazwadaaeecqakafya6gadaaeecqalacybbgakaemacgblageadablagqaiabiahkaiabpagmabwbuagyabwbuahqacgaacknyzwf0zwqgynkgawnvbmzvbnqkaabpagmabwbuagyabwbuahqaagljb25mb250aabsaguazwb1agwayqbyaabszwd1bgfyaabpagmabwbuagyabwbuahqaagljb25mb250aabpagmabwbuagyabwbuahqaagljb25mb250aabwaguacgbzagkabwbuacaamqauadaaafzlcnnpb24gms4waabpagmabwbuagyabwbuahqaagljb25mb250aabhaguabgblahiayqb0aguazaagagiaeqagahmadgbnadiadab0agyaiabmahiabwbtacaargbvag4adablagwababvacaacabyag8aagblagmadaauaabhzw5lcmf0zwqgynkgc3znmnr0zibmcm9tiezvbnrlbgxvihbyb2ply3quaaboahqadabwadoalwavagyabwbuahqazqbsagwabwauagmabwbtaabodhrwoi8vzm9udgvsbg8uy29taaacaaaaaaaaaaoaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaayaaaabaaiawwecaqmgzmfuahvpb2dlbmdkdw8aaaaaaaab//8aagabaaaadaaaabyaaaacaaeaawafaaeabaaaaaiaaaaaaaaaaqaaaadvpcciaaaaanerzryaaaaa15hnfg==) 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）的方法，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网