documentation to have fontawesome working not clear

[LuisBL]

Mermaid as basic support for fontawesome Cf.
https://mermaid-js.github.io/mermaid/#/flowchart?id=basic-support-for-fontawesome

It's working with cli and on live-editor with e.g.
see it on live-editor

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

I guess that should be something like below (not working my side):

The CDN way

on conf.py set the mermaid_fontawesome_uri variable:

$ grep font-awe conf.py
mermaid_fontawesome_uri="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
$

that will make sphinxcontrib-mermaid add the below <link to the header:

<link rel="stylesheet" 
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" 
         integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Or to have it working offline:

download the version 5 kit

_static$ unzip -q fontawesome-free-5.15.4-web.zip 
/_static$ ls
fontawesome-free-5.15.4-web.zip fontawesome-free-5.15.4-web
_static$ vim ../conf.py  # set html_js_files
_static$ grep fonta ../conf.py
html_js_files = ['_static/fontawesome-free-5.15.4-web', 'path/to/all.js']
_static$ cd ..
$ make clean html

[benjaoming]

Using the raw format on a Sphinx project that already has FontAwesome works for me. When this happens, the output diagram is an svg object directly in the generated HTML.

When I use the svg format and mmdc is used, a file is referenced with a <object data="_images/mermaid-e69675f27cbad9b86a0cf3d0587fabe390ac1501.svg" type="image/svg+xml">

It would be nice with an option to keep generating the SVG but to have all of the contents directly injected into the HTML structure in an <svg> tag, same as what raw amounts to. That way, CSS rules will work without injecting into the <object> frame.

[benjaoming]

I think the fact that this works on mermaid-live-editor is that they inject something into the generated SVG?

https://github.com/mermaid-js/mermaid-live-editor/pull/849/files