Issue rendering Font Awesome 5 in Chrome

[LillaLillian]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I have an issue with rendering of font awesome 5 icons, they will only show up as squares. I'm using Google Chrome and Font Awesome 5 Pro.

Specifications:

• html2canvas version tested with: 1.0.0-rc.3
• Browser & version: Google Chrome 75.0.3770.80
• Operating system: Windows 10

[ngspinu]

Same issue here. Any updates on this one? Thank you

[queejie]

Same issue.

[dheerajkumarmadaan]

Exactly the same issue. Any updates so far? Thanks.

[grahamkane]

I did some digging around and think this is down to the number within the CSS font family value (e.g. "Font Awesome 5 Free"). This causes an issue in the canvas renderer, since it uses the short-hand CSS syntax for setting the canvas context font.

Wrapping the font names in quotes fixed the issue for me. Submitted a PR for it.

[ghafooridev]

hey, I have the same issue, I tried many solutions that exist in Github reported the issue but it still the same. any practical solution?

[hedi-edelbloute]

@ghafooridev use this PR (thank you @grahamkane)

[aaroncrawford]

For those having issues with this, also try to remove the spaces from your all.min.css file in Font awesome. Your classnames should be this, for example FontAwesome5Pro, FontAwesome5Brands, etc.

My class names were in quotes and still not working, but after changing them to be without space my icons started rendering in html2canvas.

[Chandand76]

same issue for me?
using html2canvas 1.0.0-rc.5 version.