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

47 阅读1分钟

在这里插入图片描述

需求描述

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

本地引入方式,这里就不提了,可以自行百度搜索,为什么在这里不讲本地引入字体图标的方式,因为微信小程序打包有大小限制,如果你的字体图标比较多,还是比较占空间的,有可能打包微信小程序的时候无法打包完成。 ![在这里插入图片描述](direct/33c99a8446b04566a4e743ba8a0fd65b.png

引入线上图标字体

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

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>