vue项目自定义左边菜单栏图标icon

通过iconfont来转化成代码，添加类使用。

1、上传图标

2、上传成功后把图标加入到购物车，再加入到项目中

  3、编辑项目设置，然后下载文件

 

 4、文件另存到icons文件夹，main.js全局引入

把下载的文件存到项目存放icons的文件夹，下面的文件里面有很多小文件，只需要拿.css，.ttf，.woff，.woff2这4个格式的文件就行

import './assets/icons/router-icons/iconfont.css'

5、路由中直接使用，要加前缀iconfont

import type { Route } from '../index.type'
import Layout from '@/layout/index.vue'
import { createNameComponent } from '../createNode'
const route: Route[] = [
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    hideMenu: true,
    meta: { title: 'message.menu.dashboard.name', icon: 'iconfont system-home' },
  },
  {
    path: '/home',
    component: Layout,
    redirect: '/home/dashboard',
    meta: { title: 'message.menu.dashboard.name', icon: 'iconfont c-home_a' },
    alwayShow: true,
    children: [
      {
        path: 'dashboard',
        component: createNameComponent(() => import('@/views/main/home/dashboard/index.vue')),
        meta: { title: 'message.menu.dashboard.index', hideClose: true },
      }
    ],
  },
]

export default route

 也可以在页面i标签中使用

<i class="iconfont c-home_a" />