Open jasper502 opened 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.
Checking in, I have a similar issue with Font Awesome, did you make any progress on this?
Exactly the same issue here
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!
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.
@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).
@unixmonkey Sure, checked and it worked fine without the edge version gem 'wkhtmtopdf-binary', '=0.12.3'
as well.
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.