Skip to content

更改徽标和图标

¥Changing the logo and icons

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

¥When installing Material for MkDocs, you immediately get access to over 8,000 icons ready to be used for customization of specific parts of the theme and/or when writing your documentation in Markdown. Not enough? You can also add additional icons with minimal effort.

配置

¥Configuration

¥Logo

0.1.0材料/库

¥0.1.0 material/library

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

¥The logo can be changed to a user-provided image (any type, incl. *.png and *.svg) located in the docs folder, or to any icon bundled with the theme. Add the following lines to mkdocs.yml:

theme:
  logo: assets/logo.png

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

  1. 输入几个关键字，使用我们的图标搜索找到完美的图标，然后单击短代码将其复制到剪贴板：

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

¥Enter a few keywords to find the perfect icon using our icon search and click on the shortcode to copy it to your clipboard:

extra:
  homepage: https://example.com

网站图标

¥Favicon

0.1.0资产/图片/favicon.png

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

theme:
  favicon: images/favicon.png

站点图标

¥Site icons

9.2.0

¥Normally, the logo in the header and sidebar links to the homepage of the documentation, which is the same as site_url. This behavior can be changed with the following configuration:

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

¥0.1.0 assets/images/favicon.png

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

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

¥The favicon can be changed to a path pointing to a user-provided image, which must be located in the docs folder. Add the following lines to mkdocs.yml:

图标名称

¥Icon name

目的

¥Purpose

logo

¥logo

查看徽标

¥See Logo

menu

¥menu

打开抽屉

¥Open drawer

alternate

¥alternate

更改语言

¥Change language

search

¥search

搜索图标

¥Search icon

share

¥share

分享搜索

¥Share search

close

¥close

重置搜索，关闭公告

¥Reset search, dismiss announcements

top

¥top

返回顶部按钮

¥Back-to-top button

edit

¥edit

编辑当前页面

¥Edit current page

view

¥view

查看页面源代码

¥View page source

repo

¥repo

存储库图标

¥Repository icon

admonition

¥admonition

查看警告图标

¥See Admonition icons

tag

¥tag

查看标签图标和标识符

¥See Tag icons and identifiers

previous

¥previous

页脚中的上一页，在移动设备上隐藏搜索

¥Previous page in footer, hide search on mobile

next

¥next

页脚中的下一页

¥Next page in footer

定制

¥Customization

附加图标

¥Additional icons

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

¥ 9.2.0

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

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

¥Most icons you see on your site, such as navigation icons, can also be changed. For example, to change the navigation arrows in the footer, add the following lines to 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

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

¥The following is a complete list of customizable icons used by the theme:

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

¥In order to use custom icons, extend the theme and create a new folder named .icons in the custom_dir you want to use for overrides. Next, add your *.svg icons into a subfolder of the .icons folder. Let's say you downloaded and unpacked the Bootstrap icon set, and want to add it to your project documentation. The structure of your project should look like this: