When converting HTML to PDF using Dompdf, Font Awesome icons may not appear as expected

I am currently using Dompdf for exporting an HTML page to PDF. The issue I am facing is that when the HTML file contains Font Awesome icons, in the resulting PDF there are question marks instead of the icons.

Below is a snippet 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>: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41322e2c24012c20282d6f222e2c">[email protected]</a></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>

The icons do not appear in the PDF generated, showing only question marks instead:

<li><span class="fa fa-envelope"></span> <strong>Email</strong>: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582b37353d1835393134763b3735">[email protected]</a></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 can this be resolved?

csspdffont-awesomedompdf

Answer №1

The parsing of the FontAwesome stylesheet by Dompdf is currently causing an issue where the font family is being read incorrectly. If you encounter this problem, consider submitting a bug report.

A temporary fix for this issue is to redefine the fa class after including 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 customized styling with the original, you'll see that the display type has been adjusted. Prior to dompdf version 0.7.0, auto-calculated widths were not supported, resulting in block elements filling 100% width of their container. You can experiment with fixed widths like width: 1.25em; as an alternative solution, but extensive testing may be needed to minimize any negative effects.

Answer №2

After much investigation, I have reached a conclusion. Behold the single line of code that will display Font Awesome icons in dompdf.

<span style="font-family: FontAwesome">&#xF156;</span>

Answer №3

My solution to the issue of fontawesome icons not showing up in the PDF generated using puppeteer was to adjust the slowMo setting. By setting a delay of 150ms, I was able to resolve the problem and successfully include the icons in the PDF.

const browser = await htmltopdf.launch({headless: true, slowMo: 150});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Z-index for the arrangement of DIVs and elements in a webpage

I am facing an issue with my website design where the content section overlaps with the banner. This causes the content section to be hidden behind the banner, and I need it brought to the front. The problem specifically lies with the search element on my ...

css

Spilling over into the adjacent DIV

<html> <head> <title>Pixafy</title> <style> html { background: url(wp.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgrou ...

csshtml

Is there a way to dynamically adjust the carousel slide indicators based on the changing viewport size?

My carousel is inspired by the one at the following link: I am looking to make a modification where, as the screen size decreases, the bottom links disappear and are replaced with dot indicators for switching between slides. ...

javascripthtmlcss

Cannot utilize Map within each loop

Below is the less code snippet: @threshold:{ a:50; b:200; }; @themes:{ a:red; b:blue; }; .mymixin(@name,@color,@thrshld){ //do-something } each(@themes,{ .mymixin(@key,@value,@threshold[@key]); }); Upon executing the code, an error message ...

cssless

Guide to creating a navigation bar that expands when you expand navigation items

My portfolio website features a handful of navigation items for various views. I simply copied the default navigation code from the Bootstrap site. However, when I expand the "hamburger" menu, the navigation remains the same size, causing the expanded item ...

htmljquerycssbootstrap-4navbar

The CSS element is styled with a background color while maintaining a level of transparency

My menu structure is set up as follows: <nav id="main"> <ul id="nav-user"> <li class="user-name"> <span class="name">John Doe</span> <ul class="submenu"> <li>Pro ...

htmlcss

Tips for customizing the jQuery countdown styling

Currently, I have incorporated the jQuery countdown into my project which consists of solely the essential Javascript required for the countdown to function. However, I am interested in achieving a similar visually appealing "animated" style similar to t ...

jquerycssjquery-countdown

What is the method to position a flex column below another?

When viewed on a cell phone, I need the columns to be stacked on top of each other. I'm using Bootstrap 4 with flex divs, utilizing flex columns and rows. I've tried using the order property but it didn't work. Here is my code: <div id= ...

cssflexboxbootstrap-4

Searching for data in a bootstrap table that is not case-sensitive

Searching for and highlighting text within a bootstrap table has proven to be a challenge. Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/ HTML <table class='table table-bordered'> <thead> <tr& ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to center a slick slider both vertically and horizontally on a

I'm struggling to get my slick slider carousel perfectly centered in any browser, whether it's on desktop Chrome or an iPhone X Max. The slider is currently stuck at the top of the page and I've tried multiple solutions without success. Thi ...

javascriptjqueryhtmlcssslick.js

Troubleshooting scope variable issues with the ngStyle binding in Angular

Below is the code snippet for a component I have: @Component({ template: ` <div class="container"> <div *ngFor="let connection of connections"> <div class="row"> <div class='col-2'>{{connection.arriv ...

cssangulartypescript

Creating a navigation bar that smoothly slides into view from the top

In my Angular app (version 2+), the current code I have is: .header { background: rgba(white, 0); &.fixed-top { background: rgba(white, 1); border-bottom: solid whitesmoke 1px; position: fixed; top: 0; right: 0; left: 0; ...

cssangularcss-animations

Customizing the appearance of Twitter Bootstrap based on the AngularJS input class $invalid

I'm struggling with getting error messages to display properly in my Bootstrap form when using AngularJS. I followed the instructions on this link: but I still can't figure out what I'm doing wrong. Any advice? Thanks <div class=" ...

javascriptcssangularjstwitter-bootstrap

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

javascriptjqueryhtmlcss

What’s the best method for enclosing a table and text within a div?

The following code snippet generates the following output: However, my desired outcome is this: When I remove <div>hello world</div>, the table fits perfectly within the outer div. But when I add text to the div along with the table, it doesn ...

htmlcss

Create a spectrum of vibrant colors depending on the numerical value

I'm attempting to create a function that generates rainbow colors based on a numerical value. var max = 10000; var min = 0; var val = 8890; function getColor(min, max, val) { // code to return color between red and black } Possible Colors: Re ...

javascripthtmlcsscolors

Styling with floated divs in CSS

I'm facing a rather unique issue while working on creating a menu for a web page. The main challenge lies in ensuring that the parent element containing floated child divs adjusts its height dynamically, especially when changes are made to the padding ...

htmlcss

Having trouble selecting links in the navigation bar

Just getting started with HTML/CSS and designing a website with buttons. Got some buttons up and running perfectly fine. But now, I'm working on a navigation bar with anchors inside. The problem is that while I can see the anchors when I open the webs ...

htmlcss

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

htmlcsszooming

Set a variable to a specific cell within a table

I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create ...

javascripthtmlcss