【Abp VNext】实战入门（五）：【13】前端管理界面 vue-element-admin —— 左侧菜单自定义图标及图标大小控制_vue菜单图标

一、前言：

使用 vue-element-admin 避免不了的是自定义左侧菜单图标以及控制图标大小，今天就记录一下如何操作。

二、操作步骤：

1. 去阿里图标库查找需要的图标，然后下载对应的SVG文件：www.iconfont.cn
   

2. 把.svg文件拷贝到项目根目录：icons/svg
   

3. 在路由router/index.js 中配置新增的svg图标名：meta:{icon:‘home’}
   

4. 这样处理后已经可以在左侧菜单中显示对应图标了，但是有三个问题要解决：

   1. 自定义图标太小不受控制：自定义图标网上烂大街的讲解很多，但是自定义图标大小控制却未曾提及，估计多半都是到处拷贝的。
      在components/svgicon/index.vue 中更改配置：
      

   2. 菜单选中以后自定义图标不会跟着变色：
      打开下载的.SVG图标文件，去掉内部的 fill="#xxxxxx" 颜色配置：
      

   3. 菜单字体默认14px 想改成16px：.el-menu-item { font-size:16px; }

5. 还有个小问题是，单左侧菜单收缩起来只有图标的时候，图标不在垂直居中：
   
   找到styles/sidebar.css 中 找到 把54px改成64px:

.sidebar-container {
      width: 64px !important; //从54改成64
    }
1
2
3

三、总结：

都是通过F12 查看网页元素找到对应的 CSS控制属性之后，然后去项目中全文搜索，找到目标位置再进行修改；