修改elementui导航栏样式

修改elementui 导航栏样式

问题描述

最近在项目中引入了elementui的NavMenu,但是侧边栏的图标不能直接套用，且elementui能够提供的icon非常有限且不符合要求，UI已经把常规、选中、鼠标悬浮三种状态的小图标切好，那么如何来实现自定义的icon呢？
要实现的粗略效果：
要实现的

问题解决

1、F12打开控制台找到鼠标移上以及选中状态下对应控制样式的类名，如下图
鼠标移上时的类名：

选中时的类名：

2、自定义icon类名

<router-link to="/projectManage">
    <el-menu-item index="1">
    <i class="el-icon-proj"></i>
    <span slot="title">项目管理</span>
    </el-menu-item>
</router-link>

3、修改代码

按照上面的操作下来，就已成功实现了自定义elementui导航的icon.