提问人：bitinerant 提问时间：11/16/2023 更新时间：11/21/2023 访问量：31
如何在 MkDocs 材料的 Mermaid.js 图中包含图标？
How can I include icons in Mermaid.js diagrams in Material for MkDocs?
问：
使用 Mermaid.js 实时编辑器，我可以创建一个简单的图表，如下所示：
flowchart LR
A[fas:fa-tree A] --> B(far:fa-gem B)
显示为：
但是，当我将其复制到使用 Material for MkDocs 的网站时，显示相同的代码而不显示图标，如下所示：
我设置了美人鱼和表情符号 Markdown 扩展，并且能够在同一页面上显示其他图标（而不是在图表中），例如 和 .我什至下载了免费的 Font Awesome 图标，并可以按照使用本地自定义图标中的说明显示它们，例如 .但是，在美人鱼图中使用时，这些都不会显示。:smile::material-server::fa-regular-moon:
Mermaid 10.1 引入了 Markdown 格式，这可能也允许图标，但 MkDocs 的最新材料是 9.4.8，它只包括 Mermaid.js 9.4.3（来源）。
这些页面似乎适用，但并没有为我带来可行的解决方案：
- Font Awesome icons not loading #27
- 如何在美人鱼图中允许字体真棒图标？#5140
- material 5.x 不会在美人鱼图中呈现 Font Awesome 图标
- 高级美人鱼笔记
如何在 MkDocs 材料的 Mermaid.js 图中包含图标？
答：
1赞
Sam Morris
11/17/2023
#1
一位同事提出了以下建议，基本上是使用内嵌 HTML img 标签来拉入图标图像，并将其保存到项目的图像文件夹中。
flowchart LR
A["Here is how an image is done in mkdocs mermaid diagrams"]
A --> B[<img src='images/box.png' width='25' height='25' /> This is a box]
所以我一直在去字体网站，将图标下载为 .svg 文件并以这种方式添加它们。
评论
0赞
bitinerant
11/18/2023
谢谢。😃 它不简单也不漂亮，但它有效。顺便说一句，您可以从 Font Awesome 在一个 .zip 中获取 2025 个 .svg 文件。
0赞
Sam Morris
11/19/2023
谢谢。关于zip下载的好提示。祝你好运。
评论