更改logo和icons¶

安装 Material for MkDocs 时，您可以立即访问 8,000 多个图标，这些图标可用于自定义主题的特定部分和/或在 Markdown 中编写文档。还不够？您还可以轻松添加其他图标。

配置¶

Logo¶

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

Image Icon, bundled

theme:
  logo: assets/logo.png

theme:
  icon:
    logo: material/library

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

extra:
  homepage: https://example.com

Favicon¶

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

theme:
  favicon: images/favicon.png

Site icons¶

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

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

自定义¶

其他icons¶

要使用自定义图标，请扩展主题并在要用于覆盖的 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: