图标，表情符号¶

Material for MkDocs的最佳功能之一是可以使用[更多项目中有10000多个图标[图标搜索]和数千个表情符号文档几乎不需要额外的工作。此外，[自定义图标可以添加]并在“mkdocs.yml”、文档和模板中使用。

搜索¶

Tip: Enter some keywords to find icons and emojis and click on the shortcode to copy it to your clipboard.

配置¶

此配置允许使用简单的图标和表情符号可以通过[图标搜索]发现的短代码。添加以下内容指向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

以下图标集与MkDocs的Material捆绑在一起：

请参阅其他配置选项：

使用¶

使用表情符号¶

通过添加表情符号的短代码，可以将表情符号集成到Markdown中在两个冒号之间。如果你正在使用Twemoji（推荐），你可以查找 Emojipedia上的简码：

Emoji

:smile:

使用图标¶

启用Emoji后，可以通过引用使用类似于表情符号的图标指向与主题捆绑在一起的任何图标的有效路径，这些图标位于 [图标][自定义图标]目录，并将“/”替换为“-”：

Icon

:fontawesome-regular-face-laugh-wink:

有颜色¶

启用[属性列表]后，可以通过以下方式将自定义CSS类添加到图标中在图标后添加特殊语法。HTML允许使用[inline 样式]，始终建议添加[附加样式表]并移动声明到专用CSS类中：

docs/stylesheets/extra.css mkdocs.yml

.youtube {
  color: #EE0F0F;
}

extra_css:
  - stylesheets/extra.css

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

Icon with color

:fontawesome-brands-youtube:{ .youtube }

带动画¶

与添加[颜色]类似，通过以下方式为图标添加[动画]也很容易使用[附加样式表]，定义“@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类添加到图标短代码中：

Icon with animation

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

侧边栏中的图标和表情符号：微笑：smile:¶

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

自定义¶

在模板中使用图标¶

当你用片段或块来[扩展主题]时，你可以简单地使用Jinja的[与主题捆绑的][图标搜索]引用任何图标 include函数，并用.tweemoji CSS类包裹它：

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

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

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

图标， 表情符号¶

搜索¶

配置¶

使用¶