为何Mermaid中部分FontAwesome图标在Quarto RevealJS演示中失效？

DevOps 小满

2026-7-25

问题原因及解决办法

核心原因是Mermaid对不同节点语法的图标解析规则不一样：
- 你用D(fa:fa-phone)这种**圆角矩形节点（括号语法）**时，Mermaid会自动识别fa:前缀，加载对应的Font Awesome图标；
- 但C[fa:fa-house]是普通矩形节点（方括号语法），Mermaid默认不会解析方括号内的fa:标识，只会把这段内容当成普通文本输出，所以图标显示不出来。
解决方法有两种：
1. 把方括号节点改成括号节点，和电话图标保持一致：
```
flowchart LR
    D(fa:fa-phone)-->C(fa:fa-house)
```
2. 在方括号内用HTML标签明确指定Font Awesome类：
```
flowchart LR
    D(fa:fa-phone)-->C[<i class="fa fa-house"></i>]
```