ruby-on-rails - Wicked PDF - 将 Font Awesome 图标显示为方框

Question

我正在使用 wicked-pdf gem (v1.2.2) 生成包含 Font Awesome 图标的 PDF 报告。

我将 fontawesome 文件保留在此路径中:

vendor/assets/fonts/fontawesome.css.erb

以及此路径中的相应字体:
vendor/assets/fonts/fontawesome/fa-brands-400.eot
来自 的示例片段fontawesome.css.erb :(这就是字体的引用方式)

/*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>');
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>?#iefix') format("embedded-opentype"), url('<%= asset_path 'fontawesome/fa-brands-400.woff2' %>') format("woff2"), url('<%= asset_path 'fontawesome/fa-brands-400.woff' %>') format("woff"), url('<%= asset_path 'fontawesome/fa-brands-400.ttf' %>') format("truetype"), url('<%= asset_path 'fontawesome/fa-brands-400.svg#fontawesome' %>') format("svg"); }

I am using asset pipeline.

我在报告布局( report.html.erb )中包含了字体，如下所示:

<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>

当我在 Debug模式下加载 PDF 时，我得到 方盒只是，我在 PDF 中看不到任何内容。

我提到了这个问题:Font Awesome not working, icons showing as squares

并将 CDN 链接添加到 fontawesome 代替本地文件。
它仅适用于 Debug模式 .

当我在PDF模式下尝试时，加载时间很长，最后没有显示字体。因此，这对我来说不是解决方案。

期待您的投入。谢谢

变化:
我更新了 fontawesome.css.erb绝对引用字体文件:

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url('<%= ActionController::Base.helpers.wicked_pdf_asset_path('fontawesome/fa-brands-400.woff') %>');
}

在 Debug模式下，我在 Chrome 浏览器中收到以下错误。
Not allowed to load local resource: file:///home/Projects/my_app/vendor/assets/fonts/fontawesome/fa-brands-400.woff

Answer 1

wicked_pdf_stylesheet_pack_tag和 wicked_pdf_stylesheet_link_tag由于对 webfonts 的相对路径引用，helpers 似乎不太适合 fontawesome。

以下对我有用(使用 webpacker)...
yarn add @fortawesome/fontawesome-free
在 app/javascript/packs/reports.js (随意命名包):

import '@fortawesome/fontawesome-free/scss/fontawesome.scss'
import '@fortawesome/fontawesome-free/scss/solid.scss'
// add other icons as necessary

然后在您的布局文件中:

= stylesheet_link_tag asset_pack_url('reports.css')

使用 asset_pack_url而不是 asset_pack_path很重要，因为 wicked_pdf 需要完整的 url 并且不能使用相对路径。