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

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

教程:

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

vue+ElementUI自定义tree树形控件小图标_第1张图片

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

vue+ElementUI自定义tree树形控件小图标_第2张图片

 新建项目:

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

设置完,点新建

 vue+ElementUI自定义tree树形控件小图标_第3张图片

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

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

             vue+ElementUI自定义tree树形控件小图标_第4张图片

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

            vue+ElementUI自定义tree树形控件小图标_第5张图片

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

vue+ElementUI自定义tree树形控件小图标_第6张图片

5.解压

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

vue+ElementUI自定义tree树形控件小图标_第7张图片

vue+ElementUI自定义tree树形控件小图标_第8张图片

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

8.项目中使用

vue+ElementUI自定义tree树形控件小图标_第9张图片

 

你可能感兴趣的:(vue+ElementUI自定义tree树形控件小图标)