一.图标下载
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>
这样我们的图标就引入完成了
网友评论