Font awesome icons are not displayed when exporting HTML to PDF with Dompdf

Question

I am using Dompdf to export an HTML page to PDF. I am using some Font Awesome icons that are displayed in the HTML file itself, but in the resulting PDF, there are question marks instead of icons.

Here is part of the HTML code:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Some title</title>
    <!-- Latest compiled and minified CSS - Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">        
<link href="http://domain.com/public/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<!-- -->

<div id="wrapper" >        <div id="page-wrapper">        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default panel-table">
                        <div class="panel-heading">
    <div class="row">
        <div class="col-xs-12">
            <div class="bs-callout bs-callout-primary">
                <h4>Contact name</h4>
                <ul>
                    <li><span class="fa fa-envelope"></span> <strong>Email</strong>: [email protected]</li>
                    <li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
                    <li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
                </ul>
            </div>
        </div>
            </div>
</div>
<div class="panel-body">

<!-- A table goes here -->


    </div>                                                                                                </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- .wrapper -->


</body>
</html>

Those icons are not displayed, only questions marks instead in the PDF:

<li><span class="fa fa-envelope"></span> <strong>Email</strong>: [email protected]</li>
                    <li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
                    <li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>

How do I fix this?

Sounds like it may be an encoding issue. What's the encoding of your HTML file? it should be utf-8. If that's not it, try linking to font awesome on CDN and see if that fixes it. — timgavin
Yeah, it is <meta charset="utf-8"/> and have tried linking to the CDN, but the fonts are not displayed either. :( — Pathros
what i mean by encoding is how the document is actually saved. text editors will let you save a document with different encodings, which can easily cause these issues. — timgavin

BrianS BrianS · Accepted Answer · 2016-05-18T02:27:03

Dompdf is not correctly parsing the FontAwesome stylesheet, causing it to read the font family incorrectly (why not post a bug report?).

You can work around the issue for now by redefining the fa class after you include the FontAwesome stylesheet.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <style type="text/css">
  .fa {
    display: inline;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  </style>
</head>
<body>
  <p><span class="fa fa-envelope"></span> envelope</p>
</body>
</html>

If you compare this styling with the official one you'll notice that I changed the display type. Up to and including dompdf 0.7.0 auto-calculated widths are not supported and any block element (block, inline block) is given 100% width of its container. I've changed the display styling, but you could give it a fixed width instead, e.g. width: 1.25em;. I haven't done enough testing to know which one results in the fewest adverse affects.

Font awesome icons are not displayed when exporting HTML to PDF with Dompdf

3 Answers