menuicon

src/main/vue/public/index.html

@@ -7,6 +7,7 @@
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
         <script src="<%= BASE_URL %>fontawesome-v5.13.0.js"></script>
         <link rel="stylesheet" href="https://at.alicdn.com/t/font_2428217_x5heb96sw9.css" />
+        <link rel="stylesheet" href="https://at.alicdn.com/t/font_2470793_i5zw8ybpk58.css" />
         <title>管理后台</title>
         <style>
             @font-face {

src/main/vue/src/components/SysMenu.vue

@@ -1,11 +1,11 @@
 <template>
     <el-menu-item v-if="isLeaf" :index="'' + menu.id" :route="{ path: menu.path }">
-        <i class="fa-fw " :class="menu.icon" v-if="menu.icon"></i>
+        <i class="menuIcon" :class="menu.icon" v-if="menu.icon"></i>
         <span slot="title">{{ menu.name }}</span>
     </el-menu-item>
     <el-submenu v-else :index="'' + menu.id">
         <template slot="title">
-            <i class="fa-fw" :class="menu.icon" v-if="menu.icon"></i>
+            <i class="menuIcon" :class="menu.icon" v-if="menu.icon"></i>
             <span slot="title">{{ menu.name }}</span>
         </template>
         <sys-menu v-for="item in menu.children" :menu="item" :key="item.id"></sys-menu>
@@ -35,3 +35,15 @@ export default {
     }
 };
 </script>
+<style lang="less" scoped>
+/deep/ .menuIcon {
+    font-size: 20px;
+    width: 20px;
+    color: #fff;
+    margin-right: 10px;
+
+    &.svg-inline--fa {
+        font-size: 18px;
+    }
+}
+</style>

src/main/vue/src/views/Menus.vue

@@ -25,7 +25,7 @@
             <transition name="el-fade-in">
                 <el-col :span="12" v-if="dialogVisible">
                     <div class="menu-tree">
-                        <div style="font-weight:bold;padding:10px 0">{{ menu.id ? '编辑菜单' : '新增菜单' }}</div>
+                        <div style="font-weight: bold; padding: 10px 0;">{{ menu.id ? '编辑菜单' : '新增菜单' }}</div>
                         <el-form :model="menu" ref="form" label-position="top">
                             <el-form-item
                                 label="菜单名"
@@ -48,10 +48,9 @@
                                     ></template
                                 >
                                 <el-input v-model="icon">
-                                    <template slot="append"
-                                        ><span ref="iconContainer" style="font-size: 18px;"
-                                            ><i class="fas fa-"></i></span
-                                    ></template>
+                                    <template slot="append">
+                                        <span ref="iconContainer" style="font-size: 18px;"><i></i></span>
+                                    </template>
                                 </el-input>
                             </el-form-item>
                             <el-form-item prop="category" label="分类" v-if="menu.root">
@@ -65,7 +64,7 @@
                                     allow-create
                                     default-first-option
                                     placeholder="请输入子页面地址"
-                                    style="width:100%"
+                                    style="width: 100%;"
                                 >
                                 </el-select>
                             </el-form-item>
@@ -75,7 +74,7 @@
                                     clearable
                                     multiple
                                     value-key="name"
-                                    style="width:100%"
+                                    style="width: 100%;"
                                 >
                                     <el-option
                                         v-for="item in authorities"
@@ -127,6 +126,20 @@ export default {
             authorities: []
         };
     },
+    computed: {
+        iconName() {
+            if (this.icon) {
+                const icon = this.icon;
+                if (icon.indexOf('iconfont ') != -1) {
+                    return icon;
+                } else {
+                    return '';
+                }
+            } else {
+                return '';
+            }
+        }
+    },
     methods: {
         addRootMenu() {
             this.menu = {
@@ -387,8 +400,17 @@ export default {
             );
         },
         showIcon(val) {
+            console.log(val);
             if (!this.$refs.iconContainer) return;
-            if (FontAwesome.icon({ prefix: 'fas', iconName: val })) {
+
+            if (val.indexOf('iconfont ') !== -1) {
+                console.log(val.indexOf('iconfont '));
+                this.$refs.iconContainer.innerHTML = '';
+                let i = document.createElement('i');
+                i.className = val;
+                this.$refs.iconContainer.append(i);
+                this.menu.icon = val;
+            } else if (FontAwesome.icon({ prefix: 'fas', iconName: val })) {
                 this.$refs.iconContainer.innerHTML = '';
                 let i = document.createElement('i');
                 i.className = 'fas fa-' + val;