一.图标下载
1. 话不多说上网址https://www.iconfont.cn/
2.先选择图标加入购物车,记得先登录
3.去购物车,把图标添加到项目,没有项目的创建一个项目(为啥要创建项目不直接下载?答:方便后期修改图标和添加图标)
4.去资源管理点击我的项目,下载到本地。(联网资源会导致微信小程序及app等出现不显示的问题)
解压后的目录如下,现在我就做好准备工作了
二.把图标引入到项目
1.先来看uniapp项目结构
好多开发人员喜欢把资源放在static目录下,其实这样会导致打包的时候出现重复,增加包的体积
所以我们这里放置在了assets目录下
现在还没完,我们需要改一下css文件的文件引入地址(为啥要改css文件的文件引入地址?答:有些版本会出现不兼容的问题,导致图标显示不出来)
在这里我改了iconfont的名字,改成了jpicon,这样的话我们在写组件的时候就不能用iconfont,必须用jpicon
如图,这样我们就可以把这个组件import引入使用了
图标我们肯定是希望全局引入,方法如下
找到main.js文件,在文件里面添加
import jIcon from "@/components/j-icon/j-icon.vue"
Vue.component('j-icon', jIcon)
其中 import 组件名称 from "组件地址"
Vue.component('使用的名称', 组件名称 )
使用:
<j-icon type="css属性值" size="60" color="#fff"></j-icon>
这样我们的图标就引入完成了