改变标志和图标

在安装 Material for MkDocs 后，您可以立即访问超过 8,000 个图标，用于自定义主题的特定部分和/或在 Markdown 中撰写文档时使用。还不够？您还可以轻松添加[额外的图标]。

配置

标志

默认值： – material/library

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

图像

theme:
  logo: assets/logo.png

图标，捆绑

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

1. 输入一些关键字，使用我们的图标搜索找到完美的图标，并单击简码将其复制到剪贴板：

通常情况下，页眉和侧边栏的标志链接到文档的主页，与 site_url 相同。可以使用以下配置更改此行为：

extra:
  homepage: https://example.com

网站图标

默认值：assets/images/favicon.png

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

theme:
  favicon: images/favicon.png

自定义

额外的图标

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

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

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

markdown_extensions:
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.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:

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