【问题标题】：How to add icon to docusaurus sidebar group or item如何将图标添加到 docusaurus 侧边栏组或项目
【发布时间】：2021-09-25 11:07:36
【问题描述】：

我想用 docusaurus 添加图标侧边栏组或项目。我该怎么做？

喜欢：

【问题讨论】：

标签： icons sidebar docusaurus

【解决方案1】：

使用 CSS

将customCss 添加到您的theme 配置（docs），例如：

{
  // ...
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        // ...
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        }
      })
    ]
  ]
}

将覆盖添加到./src/css/custom.css：
- 例如：为了使图标不添加大量空白空间，请将布局更改为从左到右（而不是默认的中心重）。
```
/* Override non-category links to be horizonally compact */
li > a.menu__link {
  justify-content: flex-start;
}
```
为项目添加图标：
- 将sidebar_class_name: item1 添加到项目侧边栏链接的前面。
  - 注意：此类名称将添加到item1 的侧边栏li 元素中。
- 将类添加到 css 文件，例如：
```
.item1 a::before {
  padding-right: 0.5rem;
  content: url(../img/myImage.svg);
}
```
向部分添加图标：有点烦人
- 将"className": "section1" 添加到_category_.json
- 注意：侧边栏项目的设置方式使部分图标难以显示在正确的位置，如果没有右侧的插入符号图标最终也会被移动。
- 想法：目前最好的方法可能非常相似：将其添加到 my-section-class::before，但添加 transform 以将其移至右侧并垂直居中，并稍作调整。

结果

在本例中，Installation 没有图标，而 Item1 有：

【讨论】：