菜单图标

src/assets/fonts/demo_fontclass.html

@@ -88,7 +88,6 @@
         <p>使用步骤如下：</p>
         <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
 
-
         <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
         <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
         <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>

src/components/Home.vue

@@ -12,19 +12,19 @@
         <el-menu
           background-color="#313743"
           text-color="#fff"
-          active-text-color="#ffd04b">
+          active-text-color="#3497FF">
           <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
             <!-- 一级菜单模板 -->
             <template slot="title">
               <!--图标-->
-              <i class="el-icon-location"></i>
+              <i :class="iconsObjs[item.id]"></i>
               <!--文本-->
               <span>{{item.authName}}</span>
             </template>
             <!--二级菜单-->
             <el-menu-item :index="subitem.id+''" v-for="subitem in item.children " :key="subitem.id + ''">
               <!--图标-->
-              <i class="el-icon-location"></i>
+              <i class="el-icon-menu"></i>
               <!--文本-->
               <span>{{subitem.authName}}</span>
             </el-menu-item>
@@ -42,7 +42,14 @@ export default {
   name: 'Home',
   data () {
     return {
-      menuList: []
+      menuList: [],
+      iconsObjs: {
+        125: 'iconfont icon-user',
+        103: 'iconfont icon-tijikongjian',
+        101: 'iconfont icon-shangpin',
+        102: 'iconfont icon-danju',
+        145: 'iconfont icon-baobiao'
+      }
     }
   },
   methods: {
@@ -94,4 +101,7 @@ export default {
   .el-main{
     background-color: #E9EDF1;
   }
+  .iconfont {
+    margin-right: 10px;
+  }
 </style>