如何在codeigniter的mpdf中集成fontawesome图标？答案

【问题标题】：How to integrate fontawesome icons in mpdf in codeigniter?如何在codeigniter的mpdf中集成fontawesome图标？
【发布时间】：2023-03-28 16:20:02
【问题描述】：

我有自己编写的 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 不可见。谁能建议如何纠正这个问题？

【问题讨论】：

标签： html css codeigniter mpdf

【解决方案1】：

根据其定义将字体系列设置为空的<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";
}

【讨论】：