如何在codeigniter的mpdf中集成fontawesome图标?

问题描述

我有我写的pdf生成代码。下载pdf时,pdf中会出现一些字体很棒的图标。它不可见。我尝试了一些解决方案。我已将 fontawesome-webfont.ttf 放在 mpdf/ttfonts 中。在此之后,我在 fontvariablesmpdf/src/ 中编写了一些代码

'fontdata' => [
            
            "fontawesome" => [
                'R' => "fontawesome-webfont.ttf",],];

在此之后,我在pdf生成部分编写了一些代码,例如:

$mpdfConfig = array(
            'mode' => 'utf-8','format' => 'A4-L','orientation' => 'P','default_font_size' => 10,'default_font' => 'Arial','margin_top' => 17,'margin_bottom' => 23,//'tempDir' => '/tmp'
        );
    $mpdf = new \Mpdf\Mpdf($mpdfConfig);
    $mpdf->curlAllowUnsafeSslRequests = true;
   
   $stylesheet = '.fa-long-arrow-right { font-family: fontawesome; }';

    $html = $this->load->view('temp/'.$date.'/stream_finder_'.$exam_id.'_'.$uid,$data,true);
    $mpdf->WriteHTML($stylesheet,1);
    $mpdf->WriteHTML($html,2);
    $mpdf->Output('Stream-finder-report.pdf','D');

在html页面中,

 <i class="fa fa-long-arrow-right" aria-hidden="true" style="left: 6px;position: absolute;font-size: 20px;color: #07bb7b;"></i>

但是在生成的pdf中,fa-long-arrow-right是不可见的。任何人都可以建议如何纠正这个问题?

解决方法

根据其定义将字体系列设置为空的 <i> 不能输出任何内容。要么:

将Font Awesome中为向右箭头的字符&#xf178;直接写入HTML作为实体

<i class="fa fa-long-arrow-right" aria-hidden="true" style="...">&#xf178;</i>

或者:

更改您的 CSS 以通过 content 属性输出字符。请注意,可能需要为 :before 伪元素设置固定大小。

.fa-long-arrow-right:before {
  content: "\f178";
}