FontAwesome icons are not rendered in firefox only

[akhil-uddemarri]

FontAwesome http://fontawesome.io/ icons are rendering fine in chrome but not in firefox. It just renders a box.

[niklasvh]

Could you setup an example on jsfiddle?

[akhil-uddemarri]

http://jsfiddle.net/3ub69/

[Enome]

Ran into the same problem with a custom icon font. It works in Safari and Chrome but doesn't work in Firefox and IE.

[Enome]

Did some digging and made it work in Firefox 26 and IE 11. The problem is the following line:

https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L951

I'll try to explain why it's happening. Some of my assumptions might be wrong so feel free to correct me.

It seems that in non-webkitbrowser the object that gets returned by getComputedStyles only sets the numeric properties { 0: 'fontFamily' } on the object and the key value pairs { fontFamily: 'fontawesome' } on the prototype. Because Object.keys works like a for in loop with Object.hasOwnProperty it's leaving out the value pairs so it seems no css style is copied.

To fix it you can replace the Object.keys(), the filter method and forEach method with a for in loop.

for (var prop in elStyle) {
  if (indexedProperty(prop) && prop !== 'cssText') {
    // Prevent assigning of read only CSS Rules, ex. length, parentRule
    try {
      elps.style[prop] = elStyle[prop];
    } catch (e) {
      h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
    }
  }
}

The reason why I am checking prop !== 'cssText' is because in Firefox it's always an empty string (bug?). It seems if you copy that empty string onto the pseudo element it will reset fontFamily again.

Hope this helps.

[brcontainer]

@Enome this is very good, although I still have not tested, please send an "Pull Request".

Thanks! 👍

[fpslater]

Did @Enome ever make a pull request on this topic? I'm currently using his code as a workaround.

[Enome]

@fpslater I never made a pull request. If I remember correctly I went away from trying to convert html -> canvas and started using svg instead.

[kmdavis]

FontAwesome also fails to render for me in webkit browsers like Chrome and PhantomJS

[niklasvh]

@kmdavis Have you tried html2canvas v0.5?

[kmdavis]

We are currently using html2canvas v0.5.0-alpha

[niklasvh]

Could you provide a simple example on jsfiddle where the issue can be replicated or does http://jsfiddle.net/3ub69/52/ not work for you?

[sweetleon]

I'm having this problem also. How do I upgrade to html2canvas v0.5? I feel silly asking this, but I don't see such a branch or tag on this repo.

Thanks in advance.

[sweetleon]

PS I'm using html2canvas via rails-assets with gem 'rails-assets-html2canvas and the following bower.json file:

{
  "name": "My-App",
  "dependencies": {
    "html2canvas": "https://github.com/niklasvh/html2canvas"
  }
}

[sweetleon]

From what I see at https://rails-assets.org/components only versions <= 0.4.1 are available for rails-assets. So I've simply added the latest dist/html2canvas.js to my app/assets/javascripts/vendor/ folder and will use it like that for the time being. Thanks for making this incredibly useful library!

[fpslater]

@sweetleon Try swapping your html2canvas.js file for the one I modified here. It worked for me.

https://github.com/fpslater/fix-html2canvas-webkit-font-conversion

[fpslater]

@sweetleon Oh nevermind, you've already found a workaround ;-)

[schirrel]

I'mhaving the same problem

[dpadula]

The problem with fontawesome still happens in version 'html2canvas 1.0.0-alpha.12'

[vicdaran]

Any solution? Thanks

[IAmRC1]

The problem with fontawesome still happens in version 'html2canvas 1.0.0-rc.5