生成海报3
# 自定义图标
# 自定义顶部导航栏图标
挑选自己喜欢的图标
当你设置了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
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
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
2
3
所以你可以直接复制这个图标得类名就可以了,对于其他的图标,你可以参照这个css样式进行设置
到这里就完成了导航栏自定义图标



古茗
¥ 10

烧奶珍珠奶茶
¥ 9

酸奶
¥ 4

其他
¥ 自定义
冰糖指蜂蜜
¥ 10
推荐阅读
点击评论
文章目录
最新文章
公告
