css - wicked_pdf(使用 wkhtmltopdf)不呈现 Font Awesome 图标

Question

我正在尝试使用 pdf 中包含的 Font Awesome 图标转换现有的 html 文档。我使用 wicked_pdf 来完成这项任务。但显然创建 pdf 是一项非常艰巨的任务。所有 Font Awesome 图标都替换为空白。我需要一些建议才能使事情顺利进行。

我的配置:

• wicked_pdf (1.1.0)
• wkhtmltopdf-binary-edge (0.12.4.0)

生成的 html 如下所示:

<p>
  <i class="fa fa-phone"></i> &nbsp; +49 123 4567890
</p>

创建 pdf 的 Controller 操作:

def create_pdf
  @presenter = PortfolioPDFPresenter.new(@portfolio, self)
  html = render_to_string(template: 'portfolios/pdf_templates/portfolio',
                          layout: 'pdf_layout')
  footer_html = render_to_string(template: 'portfolios/pdf_templates/footer',
                                 layout: 'pdf_layout')
  title = ActionView::Base.full_sanitizer.sanitize(@portfolio.heading.html_safe, tags: [])

  pdf = WickedPdf.new.pdf_from_string(html,
                                      title:              title,
                                      author:             current_user.fullname,
                                      page_size:          'A4',
                                      margin:             { top: 20, bottom: 40 },
                                      print_media_type:   true,
                                      dpi:                600,
                                      zoom:               1,
                                      no_pdf_compression: false,
                                      lowquality:         false,
                                      outline:            { outline: true, outline_depth: 4 },
                                      footer:             { content: footer_html },
                                      extra:              '--encoding UTF8 --disable-smart-shrinking')

  send_data(pdf,
            filename: "#{t('activerecord.models.portfolio.one')}-#{current_user.fullname}.pdf",
            disposition: 'attachment',
            type: :pdf)
end # create_pdf

最后是布局:

!!!
%html{lang: "#{I18n.locale.to_s}"}
  %head
    %meta{ content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type' }
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }
    %meta{ 'http-equiv': 'Accept-CH', content: 'DPR, Viewport-Width, Width' }
    %title
      = t('app_title')
    = csrf_meta_tags
    = stylesheet_link_tag    'https://fonts.googleapis.com/css?family=Exo+2:400,700'
    = stylesheet_link_tag    wicked_pdf_asset_base64("pdf_styles"), media: 'print'
    = stylesheet_link_tag    wicked_pdf_asset_base64("pdf_styles")
    = stylesheet_link_tag    'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'

  %body
    #main-content
      = yield

Answer 1

我自己也遇到过类似的问题。一开始我没有得到任何图标，然后我开始得到一个奇怪的 W-on-top-of-M 类型的图标。

没有得到任何图标

在我将 Font awesome 的绝对 CDN 路径添加到我的 pdf 布局文件后得到解决。 https://github.com/brunzino/wpdf-icon-debug/pull/1/files?diff=split

得到一个奇怪的W-on-top-of-M图标

这在服务器(Ubuntu 16.04)上不是问题。就像在生产站点上正确显示的图标一样。然而，在我的 Mac 上，所有图标都被这个奇怪的图标所取代。从来没有真正解决它，但在某处读到通过在 Mac 上安装 ttf 字体可以解决这个问题。

希望对你有帮助