微信小程序Iconfont集成教程：小白也能轻松搞定

微信小程序iconfont：我的Easy上手指南

哈喽大家好！近在捣鼓微信小程序，发现iconfont这玩意儿真是个好东西！之前一直用图片做图标，不仅占内存，管理起来也巨麻烦。自从用了iconfont，感觉整个人都轻松了好多，所以今天就来跟大家分享一下我的Easy上手经验，保证一看就懂，一学就会！

啥是iconfont？简单来说，它就是一个图标字体库，里面有海量各种各样的图标，你可以像用文字一样，直接在代码里调用它们。想想看，不用再费劲巴拉地找图片、上传图片、调整图片大小了，是不是瞬间觉得很爽？

我个人觉得iconfont大的好处就是方便！统一的图标风格，看起来专业又大气，而且体积小巧，加载速度嗖嗖的，用户体验一级棒！以前用图片，稍微多几个图标，小程序加载都要等半天，现在完全没这烦恼了。

那么，具体要怎么用呢？别急，我一步一步带你操作，保证让你轻松搞定！

步：当然是去iconfont官网（www.iconfont.cn）啦！网站设计得挺简洁的，很容易上手。在网站上挑图标就像逛淘宝一样，挑到喜欢的就点“加入购物车”，然后“添加到项目”。这一步操作起来跟网购没啥区别，so easy！

第二步：项目设置！这可是个关键步骤，千万别漏了！在“项目设置”里，你会看到各种字体格式，像woff、ttf、eot啥的。我一开始也不太懂，后来发现小程序只支持base64格式，所以一定要勾选这个选项！不然你下载下来也用不了，白忙活一场。这里我顺便提醒一下，选择下载方式时，选择压缩包下载。

第三步：下载！把宝贝下载到本地，然后解压。你会发现里面有个iconfont.css文件，这个文件就是我们后面要用到的宝贝！

第四步：导入到小程序！把下载下来的iconfont.css文件放到小程序项目的utils文件夹下(或者你习惯放的任何地方)，然后在你的小程序的wxss文件中，使用@import导入这个CSS文件。比如，在我的 app.wxss 文件里，我会加上这么一行代码：

wxss

@import "./utils/iconfont.wxss";

第五步：在wxml文件里调用！这才是终目的！iconfont.css文件里会定义每个图标对应的class名，你只需要在你的wxml文件中使用相应的class名就可以了。比如，我下载了一个购物车图标，它的class名是icon-gouwuche，那么我就可以这样用：

wxml

是不是很简单？就这么几步，图标就乖乖地出现在你的小程序里了！

为了方便大家理解，我做了个小总结一下整个流程：

当然，实际操作中可能会遇到一些小比如图标显示不出来啊，大小调整不了啊，等等。别慌！一般来说，仔细检查一下代码，看看是不是路径写错了，或者class名用错了，或者CSS样式没生效。如果实在解决不了，可以上网搜一下，一般都能找到答案。实在不行，也可以在iconfont官网的社区里提问，会有很多大神帮你解答的！

我还发现一个比较有意思的点，就是iconfont可以自己定制图标。如果你有独特的审美，或者需要一些比较特别的图标，完全可以自己上传设计，生成自己的专属图标库！是不是很酷炫？

iconfont真真是个好用又方便的东西！自从用了它，我做小程序的速度明显加快了，效率杠杠的！强烈推荐给各位小伙伴！

想问问大家，你们在使用iconfont的过程中，有没有遇到什么有趣的事情或者难题？分享一下你们的经验吧！说不定能帮助到更多的小伙伴哦！