图标，表情符号

Material for MkDocs 的一个最好的功能是可以在项目文档中使用超过 10,000 个图标和数千个表情符号，几乎不需要额外的努力。此外，可以添加和使用自定义图标在mkdocs.yml、文档和模板中。

搜索

提示：输入一些关键词以查找图标和表情符号，然后点击简码将其复制到剪贴板。

配置

通过使用简单的简码，可以启用使用图标和表情符号的功能，这些简码可以通过图标搜索来发现。在mkdocs.yml中添加以下行：

markdown_extensions:
  - attr_list
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

Material for MkDocs 捆绑了以下图标集：

• – Material Design
• – FontAwesome
• – Octicons
• – Simple Icons

查看附加的配置选项：

• 属性列表
• 表情符号
• 带有自定义图标的表情符号

使用方法

使用表情符号

在 Markdown 中，可以通过将表情符号的简码放在两个冒号之间来插入表情符号。如果您使用的是Twemoji（推荐），可以在Emojipedia上查找简码：

表情符号

:smile:

使用图标

当启用[表情符号]时，可以像使用表情符号一样使用图标，只需引用主题中捆绑的任何图标的有效路径即可，这些图标位于.icons目录中，并将/替换为-：

图标

:fontawesome-regular-face-laugh-wink:

使用颜色

当启用属性列表时，可以通过在图标后缀中添加特殊语法，向图标添加自定义 CSS 类。虽然 HTML 允许使用内联样式，但始终建议添加一个附加样式表，并将声明移动到专用的 CSS 类中：

docs/stylesheets/extra.css mkdocs.yml

.twitter {
  color: #1DA1F2;
}

extra_css:
  - stylesheets/extra.css

应用自定义样式后，将 CSS 类添加到图标简码中：

带有颜色的图标

:fontawesome-brands-twitter:{ .twitter }

使用动画

与添加颜色类似，通过使用附加样式表、定义@keyframes规则并将专用的 CSS 类添加到图标中，可以轻松地向图标添加动画：

docs/stylesheets/extra.css mkdocs.yml

@keyframes heart {
  0%, 40%, 80%, 100% {
    transform: scale(1);
  }
  20%, 60% {
    transform: scale(1.15);
  }
}
.heart {
  animation: heart 1000ms infinite;
}

extra_css:
  - stylesheets/extra.css

应用自定义样式后，将 CSS 类添加到图标简码中：

带有动画的图标

:octicons-heart-fill-24:{ .heart }

侧边栏中的图标、表情符号

借助[内置的 typeset 插件]，您可以在标题中使用图标和表情符号，然后它们将在侧边栏中呈现。该插件保留 Markdown 和 HTML 格式。

自定义

在模板中使用图标

当您使用部分文件或块扩展主题时，可以使用 Jinja 的include函数简单地引用任何与主题捆绑在一起的图标，并将其用.twemoji CSS 类包装起来：

<span class="twemoji">
  {% include ".icons/fontawesome/brands/twitter.svg" %}
  <!-- (1)! -->
</span>

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

这正是 Material for MkDocs 在其模板中所做的。