FontAwesome Icons won't Show on Generated 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.