700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > iview-admin使用Iconfont-阿里巴巴矢量图标库的时候 多个Iconfont合并如何使用

iview-admin使用Iconfont-阿里巴巴矢量图标库的时候 多个Iconfont合并如何使用

时间:2020-03-03 09:31:13

相关推荐

iview-admin使用Iconfont-阿里巴巴矢量图标库的时候 多个Iconfont合并如何使用

1.实现的效果

(1)在项目的左侧菜单上的实现的效果

(2)在页面上的button按钮上实现的效果

2.Iconfont-阿里巴巴矢量图标库的下载

(1)Iconfont下载地址:

(2)如果需要多个图标,最好全部下载好再合并,不然每下载一次就要合并一次,很麻烦,本次只合并两个,分别是测试图标和按钮图标,Iconfont合并只需要下载svg文件

①测试图标和按钮图标的下载,此处只下载测试图标

②下载好的样子

3.svg文件合并过程

(1)svg合并链接:https://icomoon.io/app/#/select

(2)制作的过程

①导入并选择你需要合并的svg文件

②全选

③下载

4.代码上实现

(1)把下载下来的解压并复制进项目中并修改

①导入

②修改路径

a:修改前

b:修改后

(2)在项目中加载图标

(3)左侧菜单上的代码实现

①打开项目路由配置文件

②icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标,如果是自定义图标,需要在图标名称前加下划线’_’(左侧菜单的实现)

③页面上的button按钮上实现

5、此文章是最基础的实现,其它功能和细节有待挖掘。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。