Font aswesome not rendered upon deployment

[divyabhushan]

Describe the bug
Font awesome icons are not rendered on the deployed site - Basic support for fontawesome

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://mermaid-js.github.io/mermaid/#/flowchart?id=basic-support-for-fontawesome'
2. Look at the output diagram with missing icons

Expected behavior

Screenshots
Incorrect output:

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser: Chrome
• Version 83.0.4103.61
• Browser: Safari
• Version 13.0.3

Smartphone (please complete the following information):

• Device: iPhone7
• OS: iOS13.3.1
• Browser: Safari

Additional context

[divyabhushan]

/assign @divyabhushan

[syron]

Same issue here. we just updated to the latest release and the font awesome icons are no longer loading.

[divyabhushan]

True. Static site generators such as Jekyll and Hugo have good plugins that resolve these font awesome rendering problems.

[sudhakar-sekar]

Hi,
How to use font-awesome PRO icons in mermaid?
Can anyone suggest me.

[divyabhushan]

@sudhakar-sekar, sorry didn't get your query. Did you mean how to display these icons in your code using an embed mermaid class? Like the one shown above?

[sudhakar-sekar]

@divyabhushan No, what I mean is I am able to use free font-awesome icons in mermaid. Can I use PRO font-awesome icons instead of free icons?

[knsv]

Is this still an issue?

It works fine in the live editor so the issue is not with mermaid. I think there is an issue with the documentation site.

https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBCW1wiZmE6ZmEtdHdpdHRlciBmb3IgcGVhY2VcIl1cbiAgICBCLS0-Q1tmYTpmYS1iYW4gZm9yYmlkZGVuXVxuICAgIEItLT5EKGZhOmZhLXNwaW5uZXIpO1xuICAgIEItLT5FKEEgZmE6ZmEtY2FtZXJhLXJldHJvIHBlcmhhcHM_KTsiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ

[imfence]

It works fine in the live editor. But when i use typora, it doesnt work.

[odebroqueville]

I believe that Mermaid may require an update to support Font Awesome version 5. Please note that the "fa" prefix on its own has been deprecated:

The above is taken from the Font Awesome documentation.

Also, below is what the Mermaid documentation currently displays in Safari 14.1.2 on macOS Big Sur 11.5.2. All icons are missing in the documentation.

and this is what the Mermaid Live Editor (supporting version 8.12.1) renders when copy-pasting the sample code from the documentation. For some reason, the twitter icon is missing!

However, the results in the Live Editor are not consistent: clicking on the button in the left pane to download a PNG file will show all icons missing, as in the Mermaid documentation, but clicking on the button to open a PNG in a new tab will show all the icons (with spacing issues for the text).

[jgreywolf]

This is now working as expected in mermaidJS. If there is still an issue in the Live Editor please open a new issue in that repo