私はwicked-pdf
gem (v1.2.2) を使用して、素晴らしいフォント アイコンを含む 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"); }
アセット パイプラインを使用しています。
以下のように、fontawesome をレポート レイアウト ( report.html.erb
)に含めました。
<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>
デバッグ モードで PDF を読み込むと、正方形のボックスのみが表示され、PDF に何も表示されません。
この質問を参照しました: Font Awesome が機能しない、アイコンが四角で表示される
ローカル ファイルの代わりに fontawesome への CDN リンクを追加しました。デバッグモードでのみ機能しました。
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') %>');
}
デバッグ モードで、Chrome ブラウザに次のエラーが表示されます。
Not allowed to load local resource: file:///home/Projects/my_app/vendor/assets/fonts/fontawesome/fa-brands-400.woff