uniapp引入iconfont字体图标在微信小程序中适用

需求描述

在开发uniapp项目的时候，难免需要用到图标，虽然uniapp扩展组件uni-icons可以使用图标，但是比较图标的数量有限，有时候不能满足我们的需求，所以经常会要用到iconfont图标库，对项目图标进行扩展。

本地引入方式，这里就不提了，可以自行百度搜索，为什么在这里不讲本地引入字体图标的方式，因为微信小程序打包有大小限制，如果你的字体图标比较多，还是比较占空间的，有可能打包微信小程序的时候无法打包完成。

引入线上图标字体

这种方式比较推荐，因为不占打包的大小，更利于微信小程序使用这种在线方式，在网上搜了很多在线引入方法，总是不对，不知道大家有没有和我一样的，下面就给大家说一下正确的引入方法。

1.下载字体图标到本地

将iconfont.css放到项目static/fonts目录

2.修改iconfont.css

默认下载是引入本地字体图标，如上图所示ttf/woff/woff2这些字体图标，加起来有200k以上，所以，不需要将这些字体拷贝至本地，需要将字体图标换成网络地址。

网络地址从哪里获得那，点击下面的网络css地址。

可以看到url地址都是网络图，只需要将@font-face替换本地iconfont.css即可，或者全部复制替换也行。

3.导入到项目中

app.vue中引入

<style lang="scss">
@import 'static/fonts/iconfont.css';
</style>

index.vue中使用

<text class="iconfont icon-file-text-fill"></text>