更改图标以及覆盖主题样式

在v.1.3.7之后，你可以自定义图标

TIP

如果你想要修改的图标，在http://aurora-font.cco.vin/中可以找到，那么你可以直接修改，如果没有在http://aurora-font.cco.vin/中，那么你就需要想你平常使用图标那样，引入字体，样式，然后再使用

使用预设图标

假设你想要修改置顶的图标

你需要F12查看此图标得类名，主题所有预设的图标类名都是开头aurora-，上图置顶的图标类名为aurora-stick
在http://aurora-font.cco.vin/aurora.html站点中，找到你喜欢的图标，并记录下下面值
进入到docs/.vuepress/styles/index.css文件中，使用下面的方式修改此图标
```
.aurora-stick:before {
    content: "\e60a";
}
```
1
2
3

TIP

因为在docs/.vuepress/styles/index.css文件中的css样式，会添加到head元素的底部，所以此文件中的Css样式会覆盖默认主题提供的样式，所以你可以在此文件中，直接根据你的需要，把主题样式更改为你需要的样式，例如修改字体等等

使用自己的图标

这里使用阿里巴巴图标库进行演示，只要是字体图标，都是一样的

挑选自己喜欢的图标，然后选择添加到库
点击下载代码
解压之后，你会看到下面这些文件
将iconfont.css内的样式复制到docs/.vuepress/styles/palette.css文件中(也可以复制到docs/.vuepress/styles/index.css)中，palette.css中，主要是定义一些变量，你可以在index.css中，直接使用这些变量，然后修改字体的路径

:root {
    --test-color: pink;
}

@font-face {
    font-family: "iconfont"; /* Project id  */
    src: url('iconfont.ttf?t=1634773948652') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-zhiding:before {
    content: "\e516";
}

.icon-zhiding1:before {
    content: "\e607";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在index.css样式内，便可以像使用预设图标那样使用了
```
.aurora-stick:before {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e607";
}
```
1
2
3
4
5
6
7
8
TIP
这里需要注意，如果你使用自己的图标，那么在aurora-xxx:before{}样式内，你需要指定字体的名称，还有content值，原理就是index.css内的样式，会直接覆盖主题默认的样式

覆盖主题默认样式

如果你需要对一些样式进行更改，你可以直接在index.css中，直接修改样式，如果你需要使用一些变量，那么你可以在docs/.vuepress/styles/palette.css文件内进行定义，然后在index.css内，直接使用这些变量就可以了

# 更改图标以及覆盖主题样式

# 使用预设图标

# 使用自己的图标

# 覆盖主题默认样式

# 主题特征配置

推荐阅读

更改图标以及覆盖主题样式

使用预设图标

使用自己的图标

覆盖主题默认样式

主题特征配置