mileszs / wicked_pdf

PDF generator (from HTML) plugin for Ruby on Rails
http://www.mileszs.com/wicked-pdf-plugin
MIT License
3.53k stars 642 forks source link

Font Awesome Issues #474

Open jasper502 opened 8 years ago

jasper502 commented 8 years ago

I am new to wicked_pdf but I have Googled this to death and can't find an obvious answer. My PDF renders except for the Font Awesome icons which are just boxes (☐). I think the FA CSS is loading because if I disable the CSS load that has FA the boxes disappear on render.

This is just locally in dev and I have not tried to production yet.

screen shot 2015-12-10 at 3 27 01 pm

jasper502 commented 8 years ago

Hmm.. in debug it looks ok. I think it may be the base64 font issue that I have seen lots of posts on. It's also odd that my OpenSans font does not display by default but it does on some of the Bootstrap elements that I have.

jfornoff commented 8 years ago

Checking in, I have a similar issue with Font Awesome, did you make any progress on this?

olegsfinest commented 8 years ago

Exactly the same issue here

unixmonkey commented 8 years ago

Looks like it works OK to me.

I set it up on the wicked-pdf-issues Rails app via this commit using a CDN provided version of font-awesome.

I did notice that if I used the downloadable zip version as-is with wicked_pdf_stylesheet_link_tag, the @font-face declarations were expecting to find the Font Awesome font files under the /public/../fonts directory, but even if you add them to assets.rb and precompile (like would happen in production), they aren't in that location (they are in public/assets/fingerprint-fontawesome.*), but that is an issue with CSS and font file organization, since the stylesheet is reaching for the fonts in a relative path.

Perhaps that problem could be avoided by putting them in vendor/assets or using the font-awesome-sass gem.

Let me know how it goes!

ritec commented 8 years ago

For anyone else out there who is struggling with this issue, make sure you have at least the following versions of these two gems: gem 'wicked_pdf', '= 1.0.6' gem 'wkhtmltopdf-binary-edge', '=0.12.3.0'

I struggled for a while trying to make the FontAwesome icons render as I was getting squares too. I had Base64 encoded the font, I had installed the fonts manually, installed the rails fontawesome -64base gem, and a couple other things and it still wasn't working. Eventually I decided to look at the gem configuration in @unixmonkey wicked-pdf-issues Rails app, changed my gems to those versions and the fonts finally rendered, I was extremely happy when I saw them.

So yeah, make sure you have those gems and base64 encode them like so:

@font-face {
    font-family: 'FontAwesome';
    src: url(data:font/truetype;charset=utf-8;base64,AAAAASuperLongStringAAA==) format('truetype');
    src: url(data:image/svg+xml;charset=utf-8;base64,SuperLongStringPD94bWwgdmVyc2lvbj0=) format('svg');
    src: url(data:image/woff+xml;charset=utf-8;base64,SuperLongStringd09GRgABAAAAAK2QAA4AAAABOwwA=) format('woff');

    font-weight: normal;
    font-style: normal;
}

and it should hopefully work. Hope this helps some people.

unixmonkey commented 8 years ago

@ritec Thanks for the writeup!

Is it possible for you to check using gem 'wkhtmtopdf-binary', '=0.12.3' (not edge)? I'm curious if it has any issues with this (I suspect it won't).

ritec commented 8 years ago

@unixmonkey Sure, checked and it worked fine without the edge version gem 'wkhtmtopdf-binary', '=0.12.3' as well.