How to make mermaid's icons appear

[ComputationTime]

I'm new to Hugo and Hextra, and am trying to figure out how to make mermaid's icons appear. Any help will be appreciated!

[ComputationTime]

If this is answered, I am willing to submit a pull request to add to the docs if it's deemed useful

[imfing]

Sorry, I don't quite understand, what do you mean by "mermaid's icons"? Can you give some examples?

[ComputationTime]

From the mermaid documentation here http://mermaid.js.org/syntax/flowchart.html on the section named "Basic support for fontwesome":

flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)

I tried using it as is with markdown (code used shown below) and the result was this

    ```mermaid
    flowchart TD
      B["fa:fa-twitter for peace"]
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner)
      B-->E(A fa:fa-camera-retro perhaps?)
    ```

[imfing]

I see. Currently, you need to include the Font Awesome CSS manually to enable this for Mermaid.

1. Create a file /layouts/partials/custom/head-end.html under your site root directory
2. Add the following to this file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Result: