Q:

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

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>: some@mail.com</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>: some@mail.com</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?

A:

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.

