mPDF导出HTML时Glyphicon/FontAwesome图标不显示，求更优解决方案

Great question! I’ve dealt with this exact frustration before—having to rewrite all your FontAwesome tags just to get them to show up in mPDF is a huge hassle. Here’s a much cleaner approach that lets you keep using your original <i class="fa fa-phone"></i> style tags:

Step 1: Properly Configure FontAwesome in mPDF’s Font Settings #

First, update your /application/third_party/mpdf/config_fonts.php to not just register the font, but also enable OpenType features that FontAwesome relies on. Make sure your font file (like fontawesome-webfont.ttf for older versions, or fa-solid-900.ttf for FontAwesome 5+) is placed in mPDF’s fonts directory:

"fontawesome" => array(
    'R' => "fontawesome-webfont.ttf", // Match your actual font filename
    'useOTL' => 0xFF, // Enable full OpenType support
    'useKashida' => 75,
),

Step 2: Add Inline CSS to Map FontAwesome Classes to Your Configured Font #

mPDF needs to know that .fa (and related classes like .fas, .far for v5+) should use the fontawesome font you registered. Add this CSS either in your HTML’s <head> section or inline with your content:

/* Target FontAwesome classes and assign our registered font */
.fa, .fas, .far {
    font-family: fontawesome !important;
    font-style: normal;
    font-weight: normal;
}

/* If you're using older FontAwesome versions, ensure pseudo-element content works */
.fa-phone:before {
    content: "\f095";
}

If you already have the full FontAwesome CSS file included in your HTML, you can just modify its font-family declaration from 'FontAwesome' to fontawesome (matching the key you used in config_fonts.php) instead of writing custom CSS.

Step 3: Ensure mPDF Parses CSS Correctly #

Depending on your mPDF version, you may need to enable CSS support explicitly when initializing the mPDF instance:

For mPDF 7+ (modern versions): #

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8',
    'format' => 'A4',
    'default_font' => 'Arial',
]);
// Enable full CSS parsing (including pseudo-elements)
$mpdf->useCSS = true;

For older mPDF 6.x versions: #

$mpdf = new mPDF('utf-8', 'A4');
// Force mPDF to parse screen-based CSS (since FontAwesome's CSS targets screens by default)
$mpdf->SetCSSMedia('screen');

Why This Works #

This approach leverages mPDF’s ability to parse CSS classes and pseudo-elements (as long as enabled). Instead of hardcoding icon entities into span tags, you let mPDF handle the FontAwesome styling just like a browser would—using the original class names and pseudo-element content rules.

Quick Notes: #

• Double-check that your font file path is correct. If the font isn’t in mPDF’s default fonts directory, use an absolute path in config_fonts.php.
• For FontAwesome 5+, make sure you register the correct font files (e.g., fa-solid-900.ttf for solid icons) and target the right classes (.fas instead of .fa).
• Test with a single icon first to confirm your setup works before scaling to full content.

内容的提问来源于stack exchange，提问作者Preethi