图标与表情符号¶

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

搜索¶

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

配置¶

此配置通过使用简单的短代码启用图标和表情符号的使用，可以通过 [图标搜索] 发现。将以下行添加到 mkdocs.yml：

markdown_extensions:
  - attr_list
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.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 类：

.youtube {
  color: #EE0F0F;
}

extra_css:
  - stylesheets/extra.css

应用自定义后，将 CSS 类添加到图标短代码：

:fontawesome-brands-youtube:{ .youtube }

带动画¶

与添加 颜色 一样，使用 附加样式表、定义 @keyframes 规则并为图标添加专用 CSS 类来添加 动画 同样简单：

@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 }

侧边栏中的图标和表情符号 ¶

借助 内置排版插件，您可以在标题中使用图标和表情符号，这些图标和表情符号将被渲染在侧边栏中。该插件保留 Markdown 和 HTML 格式。

自定义¶

在模板中使用图标¶

当您通过部分或块 扩展主题 时，可以简单地使用 Jinja 的 include 函数引用任何与主题 捆绑的图标，并用 .twemoji CSS 类包裹它：

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

1. 输入几个关键词以使用我们的 [图标搜索] 查找完美的图标，并点击短代码将其复制到剪贴板：

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