FontAwesome 图标不会显示在使用 mPDF 生成的 PDF 上

Question

I am using mPDF in generating payslips. However, the icons in the payslip aren't showing once it is generated. It only leaves a blank space just like this:

Icons should show on those highlighted spots. So far, here's what I've done:

I am using Yii2 PHP framework and here's my action controller:

public function actionPdf($id)
{
    $model = $this->findModel($id);
    $earnings = EarningDetails::find()->where(['payslip_id' => $model->_id, 'status' => 1])->all();
    $deductions = DeductionDetails::find()->where(['payslip_id' => $model->_id, 'status' => 1])->all();
    $html = $this->render('view', [
        'model' => $model,
        'earnings' => $earnings,
        'deductions' => $deductions,
    ]);
    $mpdf = new mPDF('c','A5-L','0','',0,4,1,1,0,0);
    $mpdf->allow_charset_conversion = true; 
    $mpdf->charset_in = 'windows-1252';
    $mpdf->SetTopMargin(0);
    $user_password = User::find()->where(['_id' => $model->user_id ])->one(); 
    $password = $user_password->fname.$user_password->lname;
    $mpdf->SetProtection(array(), $password, $password);
    $mpdf->WriteHTML($html);
    $mpdf->Output('Payslip.pdf', 'D');
    exit;        
}

Am I missing something? Please let me know.

Answer 1

Encoding issues aside, this could be a couple of things. Firstly, you need to integrate FontAwesome with your MPDF installation. Secondly, you need to consider how you're speficiying the glyph in HTML.

Installing FontAwesome in mPDF

Download or clone FontAwesome from https://github.com/FortAwesome/Font-Awesome and copy fonts/fontawesome-webfont.ttf into your MPDF ttfonts/ directory.

In your MDPF config_fonts.php file, add the following lines to $this->fontdata :

 /* FontAwesome */
    "fontawesome" => array(
        'R' => "fontawesome-webfont.ttf"
        ),

Adding the glyph in HTML

You need to keep in mind that the CSS :before pseudo-selector commonly used to add FontAwesome glyphs to HTML doesn't work in mPDF.

Bad:

<i class="fa fa-smile-o"></i>

... because this FontAwesome CSS rule doesn't work in mPDF:

.fa-smile-o:before {
  content: "\f118";
}

Good:

<i class="fa">&#xf118;</i>

You can get the unicode code point for each glyph by clicking on it on the FontAwesome Icon List, but the Cheatsheet is more convenient for this.

Answer 2

You can try to use the re-mapped fontawesome 4.7 (free) font to #0021-#02E5 characters, and use it as it was regular FONT (ascii).

You can download the ready-to-use font here: http://mdb-blog.blogspot.com/2021/12/using-fontwesome-in-php-fpdf.html

Note that the example works for FPDF, but it is easly can be made for any tool :)