通过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" />