Font Awesome icons not loading

[sguldemond]

Hi, thanks for building this great plugin :)

Is it still in active development?

I just started exploring the MkDocs & Mermaid space and was going through the Mermaid documentation. Here I read how to use font awesome icons.

So I build the following diagram:

graph TD
    A((Data sources))-->B[fa:fa-filter Data collector]
    B-->D[fa:fa-bars Data catalog]

    B-->C[fa:fa-cogs Geo-time engine]
    C-->E[fa:fa-database Data warehouse]
    E-->F[fa:fa-calculator Analytics engine]
    F-->F1[Search/Analytics jobs]
    F1-->G[fa:fa-plug API]
    G-->H[fa:fa-calendar Task manager]
    H-->B
    click E "https://www.cockroachlabs.com/product/" "CockroachDB"
    click F "https://spark.apache.org/" "Apache Spark"
    click G "https://fastapi.tiangolo.com/" "FastAPI"
    click H "https://www.prefect.io/" "Prefect.io"

I got it working in VSCode with this extension, so I know that I got the syntax right.

But it's not loading the font awesome icons when I deploy it with MkDocs. There is a similar issue on the Mermaid GitHub. But it didn't really have a solution. I was wondering if this might be added to this plugin, or if you would know a way to get it working (can be hacky) :)

Thanks a lot!

[github-actions[bot]]

Thank you for your contribution! This is very appreciated.

[fralau]

I can't fault your code, so I can't tell the reason off the bat. 🤔

Did you try to specifiy "loose" mode, in the YAML config file, just to see whether this helps?

[sguldemond]

Yeah, I added the following to my mkdocs.yaml:

plugins:
    - mermaid2:
        arguments:
          securityLevel: 'loose'

extra_javascript:
    - https://unpkg.com/mermaid/dist/mermaid.min.js

And still not working. Here is my source file btw and repo.

I'm looking into that VSCode plugin, see if I can spot anything that does enabled it there.

Even in the mermaid documentation it's not working currently, so might be a deeper issue.

[fralau]

Even in the mermaid documentation it's not working currently, so might be a deeper issue.

@sguldemond Indeed, since this plugin relies on the mermaid javascript library, it will exhibit the same symptoms 🤷‍♂️ .

Conversely, if there is a fix in a new version, or somebody finds a hack, you should be able to implement it without much difficulty.

[sguldemond]

True, going to see if adding this might help something.

Thanks for the quick reply anyway!

[sguldemond]

Hey @fralau , I fixed it :)

After I reading this, I added the following in my markdown:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

[sguldemond]

Cleaner fix, adding to mkdocs.yml:

extra_css:
  - https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

[fralau]

👏 This is great!

[fralau]

Is it still in active development?

@sguldemond Yes absolutely. I haven't had much request to improve it, thats all 😄

[aniston]

@fralau & @sguldemond ,

Thanks to @sguldemond 's notes I got this working as well, i had to have the fonts in a fonts directory (although not specified in the mkdocs.yml file) at the same level with the cssdirectory, else browser would complain of "not found .woff files"

• I saved the files locally got from FONT-AWESOME 4.7.0 CDNs

my mkdocs.yml file contains:

extra_css:
  - 'assets/css/font-awesome.min.css'

[fralau]

@aniston This is, of course, something you can do.