更改徽标和图标¶

安装 Material for MkDocs 后，您可以立即访问 超过 8,000 个图标，这些图标可用于自定义主题的特定部分和/或在使用 Markdown 编写文档时。如果这还不够，您还可以以最小的努力添加 额外图标。

配置¶

徽标¶

0.1.0 material/library

徽标可以更改为用户提供的图像（任何类型，包括 *.png 和 *.svg），该图像位于 docs 文件夹中，或更改为主题捆绑的任何图标。将以下行添加到 mkdocs.yml 中：

theme:
  logo: assets/logo.png

theme:
  icon:
    logo: material/library # (1)!

通常，页眉和侧边栏中的徽标链接到文档的主页，这与 site_url 相同。可以通过以下配置更改此行为：

extra:
  homepage: https://example.com

网站图标¶

0.1.0 assets/images/favicon.png

网站图标可以更改为指向用户提供的图像的路径，该图像必须位于 docs 文件夹中。将以下行添加到 mkdocs.yml 中：

theme:
  favicon: images/favicon.png

网站图标¶

9.2.0

您在网站上看到的大多数图标，例如导航图标，也可以更改。例如，要更改页脚中的导航箭头，请将以下行添加到 mkdocs.yml 中：

theme:
  icon:
    previous: fontawesome/solid/angle-left
    next: fontawesome/solid/angle-right

以下是主题使用的可自定义图标的完整列表：

自定义¶

额外图标¶

为了使用自定义图标，扩展主题并在您想要用于覆盖的 custom_dir 中创建一个名为 .icons 的新文件夹。接下来，将您的 *.svg 图标添加到 .icons 文件夹的子文件夹中。假设您下载并解压了 Bootstrap 图标集，并希望将其添加到您的项目文档中。您的项目结构应如下所示：

.
├─ overrides/
│  └─ .icons/
│     └─ bootstrap/
│        └─ *.svg
└─ mkdocs.yml

然后，将以下行添加到 mkdocs.yml 中：

markdown_extensions:
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons

现在，您可以在 Markdown 文件中的任何地方使用所有 Bootstrap 图标，以及在 mkdocs.yml 中可以使用图标的任何地方。 但是，请注意，语法略有不同：

• 在配置中使用图标：获取从 .icons 文件夹开始的 *.svg 图标文件的路径，并去掉文件扩展名，例如，对于 .icons/bootstrap/envelope-paper.svg，使用：

  theme:
    icon:
      logo: bootstrap/envelope-paper
  

• 在 Markdown 文件中使用图标：除了从 .icons 文件夹获取路径外，还需将所有 / 替换为 -，并将图标短代码用两个冒号括起来：

  :bootstrap-envelope-paper:
  

有关图标使用的更多说明，请查阅 图标参考。