vue+ElementUI自定义tree树形控件小图标

时间:2024-03-22 17:30:26

Element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下

教程:

1.进入iconfont http://www.iconfont.cn/   注册 >登录>图标管理>我的项目

vue+ElementUI自定义tree树形控件小图标

2.进入到我的项目里(第一次进可以新建项目)

vue+ElementUI自定义tree树形控件小图标

 新建项目:

项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。

设置完,点新建

 vue+ElementUI自定义tree树形控件小图标

3. 现在我们返回阿里icon首页,点进去你想要的icon库

      3.1 搜索需要的小图标,点击添加到购物车

             vue+ElementUI自定义tree树形控件小图标

      3.2 进入购物车,将选择好的小图标添加至项目

            vue+ElementUI自定义tree树形控件小图标

4 . 进入到我的项目中,点击下载至本地

vue+ElementUI自定义tree树形控件小图标

5.解压

vue+ElementUI自定义tree树形控件小图标

6.在src/assets下创建一个icon文件夹放入解压后选择的文件

vue+ElementUI自定义tree树形控件小图标

vue+ElementUI自定义tree树形控件小图标

7.在main.js里边把css引进来

vue+ElementUI自定义tree树形控件小图标

8.项目中使用

vue+ElementUI自定义tree树形控件小图标