CODEWITHSUNDEEP
htmlpdfitextfont-awesome
Mathias G.
Mathias G.

Reputation: 5085

iText: how to include font awesome icones in generated PDF

I'm using version 2.1.7 of iText and I want to generate a PDF version of an HTML.

My HTML file contains font awesome icons:

<i class="fa fa-check" style="color:green" aria-hidden="true"></i>

When I now generate a PDF file from this HTML, nothing is displayed... I think I'll need to register the font awesome with the font provider, but until now, I didn't found out how :(

This is my code to generate the pdf:

 // pdf conversion
 ConverterProperties props = new ConverterProperties();
 FontProvider dfp = new DefaultFontProvider(true, true, false);

 /* Temporary fix for display issue with blocks (in current html2pdf version (2.0.1) */
 props.setTagWorkerFactory(new LabelBlockTagWorkerFactory());
 props.setCssApplierFactory(new LabelBlockCssApplierFactory());
 props.setFontProvider(dfp);

 HtmlConverter.convertToDocument(html, pdfDoc, props);
 footerHandler.writeTotal(pdfDoc);
 pdfDoc.close();

Anyone has an idea?

Upvotes: 0

Views: 1804

Answers (1)

Kevin Brown
Kevin Brown

Reputation: 8877

Font awesome icons are injected by javascript and css into the pseudo before area. The only way you can process that if you are doing pure html is to use the font awesome cheat sheet, get the character code, use a span with that font family. You would need to download a TTF fontawesome font and register it in iText.

Although this is not iText and uses other PDF formatting, you can look here to see pseudo elements:

http://www.cloudformatter.com/CSS2Pdf.Demos.PseudoElem

Here for Fontawesome and Gylphicons:

http://www.cloudformatter.com/CSS2Pdf.Demos.GlyphIcons

And you can download the Javascript to see what happens however the whole part that does what I state above has been removed because you can get the pseudo elements from the DOM of the browser now. Before, the code would do as i said and just inject a <span> in the content with the right font-family.

You would need to abandon the use of fontawesome and just use the actual characters in the HTML as nothing processing the HTML+CSS is also going to process the Javascript that injects the icon, no more than it would replace <div id="mychart"/> with the actual chart, unless you use a solution that will execute the Javascript before you print.

Upvotes: 2

Related Questions