Issue rendering Font Awesome Duotone icons

pandamouse commented 4 years ago

wkhtmltopdf version(s) affected: 0.12.5 (with patched qt)

OS information Ubuntu 18.04 Bionic Beaver

Description When rendering html containing Font Awesome Duotone icon the :after css content (typically the lighter back layer using unicode U+10FXXX) fails to resolve from the ttf (which is embedded using base64 in the @font-face) while the :before css content does resolve from the same ttf, resulting in the icon being rendered with a lighter background of a square with a question mark.

How to reproduce (Don't think I'm allowed to put the ttf content in here)

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
@charset "UTF-8";

@font-face {
      font-family: 'Font Awesome 5 Duotone';
      src: usl(data:font/ttf;bcase64,<Base64 content for duotone.ttf> format('truetype');
      font-weight: 900;
      font-style: normal;
    }

.fad {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

.fad {
  position: relative;
  font-family: 'Font Awesome 5 Duotone';
  font-weight: 900;
}

.fad:before {
  position: absolute;
  color: var(--fa-primary-color, inherit);
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1);
}

.fad:after {
  color: var(--fa-secondary-color, inherit);
  opacity: 0.4;
  opacity: var(--fa-secondary-opacity, 0.4);
}

.fa-file-pdf:before {
  content: "\f1c1";
}

.fad.fa-file-pdf:after {
  content: "\10f1c1";
}

.fad.fa-file-pdf {
    color: Tomato;
    font-size: 60px;
}

</style></head><body class="body-font-medium" style=""><span class="fad fa-file-pdf"></span></body></html>

This would show duotone in the browser but in the pdf generated from wkhtmltopdf it shows

Expected behavior When converted into PDF I'm expecting the icon to display properly. It should render duotone instead.

Possible Solution

Ribeiro-Tiago commented 3 years ago

@pandamouse did you find a solution for this ? I'm having the same issue

Running catalina v10.15.7 with wkhtmltopdf v0.12.6 (with patched qt)

edit: add more information for devs for future

pandamouse commented 3 years ago

@Ribeiro-Tiago Nope. Just used the non duo tone icons instead. In my case the code rendering the icons is shared with other parts that could show the duo tone so I just override the duo tone css in the pdf specific section. But for most people it should be sufficient to just use .fas or whatever instead of .fad.

// wkhtmltopdf seems to have issues rendering the :after
// so we are using fas ttf and hiding the :after
// override Font Awesome Duotone :after
.fad {
  position: relative;
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
}

.fad::before {
  position: static;
}

.fad::after{
  display: none !important;
}

Ribeiro-Tiago commented 3 years ago

yeah I had to go down the same route.

One other solution that I thought of was to use the svg / sprite icons instead of webfonts but time consumption wise was preferrable to just change to non-duotones. Unfortunate, thanks though

Kulgar commented 2 years ago

@Ribeiro-Tiago : you know what? Your answer actually saved my day! Indeed, for an unknwon reason my fontawesome icons wouldn't render at all once on production - and yet I'm using the base64 fonticon (and everything works fine in dev env)... I think this is because my production environment is running Ubuntu 21...

I... actually didn't think about using SVGs directly... That will be a good enough solution for me :-)

wkhtmltopdf / wkhtmltopdf

Issue rendering Font Awesome Duotone icons #4524