Fontawesome not working - PDF Converter (Webkit)

Hi.  I've seen a few forum posts about how to get fontawesome to work with the Syncfusion HTML-to-PDF creator.  Everything on my page is rendering fine except the fontawesome icons which don't render at all.

I found these posts but they don't really seem to help my issue (converting HTML page to PDF):

https://www.syncfusion.com/forums/148392/font-awesome-in-pdf-documents (not converting an html page)

https://www.syncfusion.com/forums/156031/render-problem-font-awesome-in-pdf-document (problem with italics in fontawesome 5 icons)


I'm trying to use fontawesome 5 icons but I can downgrade to fontawesome 4 if I need to.  But I can't even get those to render properly.  Ex: try to convert the page to PDF on fontawesome's own site:

https://fontawesome.com/v4/examples/

Code:


string filename = "TestURL.pdf";
//Initialize HTML to PDF converter
HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);
WebKitConverterSettings settings = new WebKitConverterSettings();

//Set WebKit path
settings.WebKitPath = Path.Combine(_hostingEnvironment.ContentRootPath, "QtBinariesWindows");

settings.AdditionalDelay = 2500;
settings.MediaType = MediaType.Print;

//Assign WebKit settings to HTML converter
htmlConverter.ConverterSettings = settings;

//Convert URL to PDF
PdfDocument document = htmlConverter.Convert("https://fontawesome.com/v4/examples/");

//Saving the PDF to the MemoryStream

MemoryStream stream = new MemoryStream();
document.Save(stream);

//Download the PDF document in the browser

return File(stream.ToArray(), System.Net.Mime.MediaTypeNames.Application.Pdf, filename);


See attached output - no icons.

Thanks for any help in advance!!


Attachment: TestFontAwesome4_76510f7e.zip

1 Reply

GK Gowthamraj Kumar Syncfusion Team August 16, 2022 11:45 AM UTC

Hi Miles,


We have checked the reported issue with HTML to PDF converter. Our HTML converter internally make use of Qt WebKit rendering engine for converting HTML to PDF. WebKit rendering engine preserves the output PDF document like how the input HTML file/URL is displayed on the WebKit based web browsers (safari, internal tool). We were unable to reproduce the reported issue on our end, the FontAwesome 4 Icons are preserved properly and you can confirm these behaviors with internal tool web browsers. The same behavior as replicates in our converter. We have attached a screenshot of the provided webpages view in internal tool browser for your reference.


We have attached the Qt WebKit browser for your reference. Please find the browser below link,

Qt WebKit browser: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FancyBrowser-1169646589


Steps to use the WebKit browser (internal tool):

  • Download and Extract the browser from above link.
  • Copy and Paste the fancybrowser.exe into QtBinaries folder.
  • Run the fancybrowser.exe.
  • Browser window will open with default URL (www.google.com ) and you can use your input URL and check the web page behavior.


Fancy Browser Screenshot:


Some advanced CSS styles are not supported in the WebKit rendering engine. We introduced a new Blink rendering engine, which supports the latest CSS styles and advanced web features. The provided HTML styles are rendered properly in our Blink rendering engine. Blink rendering engine internally using a chrome headless browser for converting HTML to PDF. It will preserve the PDF document like how the input HTML is displayed in chromium-based web browsers (chrome). Kindly please try our latest Blink rendering engine and let us know if it is suites your requirement.

Blink: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink

https://help.syncfusion.com/file-formats/pdf/converting-html-to-pdf#supported-and-unsupported-features-by-rendering-engines


We have attached the sample with output document (WebKit and Blink) for your reference, please try the sample on your end and let us know the result.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HtmlCore-908808198


Note: The Blink rendering engine does not support conversion in Azure app service (Azure websites) and Azure function. Azure app service environment does not have elevated permissions and enough rights to launch the browser for converting HTML to PDF. However, we can use the Html to PDF converter with .NET Core library in Azure App Service Linux or Azure Functions Linux.


Please try the above suggestions in your end and let us know if you need any further assistance on this.


Regards,

Gowthamraj K


Loader.
Up arrow icon