Wicked_pdf: Trouble with FontAwesome Icons

[brunzino]

I'm having trouble getting FontAwesome icons to show up in pdf's. Several things are working, except rendering and saving .pdfs. Fonts are now included in base64, though they actually rendered correctly in a couple cases before.
e.g.

$ wkhtmltopdf http://fortawesome.github.io/Font-Awesome/icons/ icons.pdf

renders the icons correctly to icons.pdf

*What is working: *

pointing browser to http://localhost:3000/my_file.pdf?debug=1 shows icons correctly

$ wkhtmltopdf http://localhost:3000/my_file.pdf?debug=1 my_saved_file.pdf

renders icons correctly to my_saved_file.pdf

Any other ideas to try? Would it help to set up a Github project with my whole set up?

[brunzino]

Here's my wicked_pdf code:

# controller.rb
      format.pdf do
        render  :pdf => "night_manager_report_downloaded", 
                :template => 'night_manager_reports/show.pdf.erb',
                :layout => 'pdf.html.erb', 
                # :disposition => 'attachment',
                :save_to_file => Rails.root.join('reports', "night_manager_report_saved.pdf"),
                :save_only => false,
                :show_as_html => params[:debug].present?
      end

[unixmonkey]

Perhaps the CSS or Javascript paths aren't absolute?

[brunzino]

Hi @unixmonkey , I have tried linking stylesheets using both CDNA and wicked_pdf_stylesheet_link_tag methods. Neither works when rendering to a pdf, but both work if viewing as ?debug=1

<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> -->

<%= wicked_pdf_stylesheet_link_tag "pdf", media: :all, "data-turbolinks-track" => true %>

[unixmonkey]

@brunzino Does it work if you download and serve font-awesome.css from your local system, rather than over the internet?

[brunzino]

I have tried referencing a local version of font-awesome.css, gotten it to work as ?debug=1 but still fails when rendered/saved to a pdf.

[brunzino]

I made a github project to fork, clone, hack on. Tried to limit SEO keywords, will take down when this is figured out. Hope it helps!

https://github.com/brunzino/wpdf-icon-debug

[unixmonkey]

@brunzino Thanks for the excellent example application, it really helped me see what exactly you were doing and expecting!

I've managed to get things working and issued you a pull request here:
https://github.com/brunzino/wpdf-icon-debug/pull/1

In summary, it appears that something about font-awesome where wkhtmltopdf doesn't quite render things the same as what normal webkit does. Since wicked_pdf_stylesheet_link_tag actually inlines the stylesheet, it doesn't work through wkhtmltopdf in this case (not sure why, though).

Also, using protocol-relative //netdna.bootstrapcdn.com/font-awesome/yaddayadda.css doesn't work right with wkhtmltopdf, I've encountered this before in issue [#235], so I added http:.

Lastly, you have html comments around your stylesheets (<!-- and -->). Again, chrome doesn't seem to mind, but wkhtmltopdf does. Removing them provides the final piece in getting the icons to render correctly inside the PDF on my system.

Thanks again for the excellent bug report, I'm sure this will help others in the future!

[raykin]

@unixmonkey you save my day. Thanks

[brunzino]

Fantastic!

Once again, the stylesheet include code is this:

<%= stylesheet_link_tag "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", media: "all", "data-turbolinks-track" => true %>

Also works for including bootstrap glyphicons:

<%= stylesheet_link_tag "http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css", media: "all", "data-turbolinks-track" => true %>

And being sure to only include the stylesheet once is essential. Commenting out is not good enough.

Thanks again @unixmonkey! I'll remove the debug project.

P.S. Righteous beard, man!

[smoyth]

Getting rid of // for https:// fixed it for me. Thanks!