Skip to content

Suggestion for getting fontawesome working  #474

Open
@tstarbow-sfdc

Description

@tstarbow-sfdc

I am not seeing fontawesome icon in the rendered svg files. Rendering the fontawesome example from the mermaid doc only shows the text:

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?)

However, if I crack open the generated svg file, and add the following line, the icons show up as expected:

  <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" type="text/css"/>

So I am guessing something like this, added around line 252 of index.js would solve the problem, but I haven't tested it:

      const faStyle = document.createElementNS('http://www.w3.org/2000/svg', 'link')
      faStyle.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
      faStyle.setAttribute('rel', 'stylesheet')
      faStyle.setAttribute('type', 'text/css')
      faStyle.setAttribute('href', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css')
      svg.appendChild(faStyle)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions