生成海报3 

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

在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";
  }
  

  

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";
  }
  

• 在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";
  }
  

  TIP

  这里需要注意，如果你使用自己的图标，那么在aurora-xxx:before{}样式内，你需要指定字体的名称，还有content值，原理就是index.css内的样式，会直接覆盖主题默认的样式

• 

覆盖主题默认样式

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

主题特征配置

主题特征配置