自定义图标

自定义顶部导航栏图标

进入iconfont-阿里巴巴矢量图标库
挑选自己喜欢的图标

当你设置了fontFamily之后，先点击下载到本地看看

然后将此链接复制下来，进入到config.js文件中

module.exports = {
    head: [
        [
            "link",
            {
                rel: 'stylesheet',
                type: 'text/css',
                href: '这里替换成，你上一步在阿里矢量图标库中，复制的css链接'
            }
        ]
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12

设置好之后，便可以更改navbar的图标了

然后启动，一定要注意，设置之后，一定需要重新启动，也就是重新运行npm run dev命令

TIP

我只对一级导航设置了图标，对于二级，三级，四级...导航，你设置了也没有用

navbar: [
    {
        //这里是一级导航
        text: '问题和bug',
        iconClass: 'aurora-si-glyph-global',
        
        //children中配置的是二级导航
        children: [
            {
                text: 'CHANGELOG',
                children: [
                    '/issue/CHANGELOG.md'
                ]
            },
            {
                text: '主题详细搭建教程',
                children: [
                    '/readme/introduce.md',
                    '/use/useTheme.md'
                ]
            },
            {
                text: '问题',
                children: [
                    '/issue/',
                ]
            },
            {
                text: 'bug',
                children: [
                    '/issue/bug.md',
                ]
            }
        ]
    },
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

该主题不仅支持阿里矢量图标库，还支持其他的，只是我演示使用阿里矢量图标库，对于其他的，包括使用阿里矢量图标库，一定要保证图标的font-family是aurora-font，否则不会生效，因为阿里矢量图标库，他默认就会为每一个图标设置class，并且设置

.custom-aurora-xxx:before {
  content: "\exxx";
}

1
2
3

所以你可以直接复制这个图标得类名就可以了，对于其他的图标，你可以参照这个css样式进行设置

到这里就完成了导航栏自定义图标

# 自定义图标

# 自定义顶部导航栏图标

推荐阅读

自定义图标

自定义顶部导航栏图标