Hi SF,
I'm using the Blink converter (Essential PDF) to generate a PDF from and HTML string which includes a custom icon font using
@font-face on an external CSS file but the icon isn't rendering on the PDF, it just displays a square (see attached image).
This is the relevant piece of my stylesheet:
@font-face {
font-family: 'themify';
src: url("http://field.floodlightsoft.com/Content/assets/fonts/themify.eot?-fvbane");
src: url("/Content/assets/fonts/themify.eot?#iefix-fvbane") format("embedded-opentype"), url("/Content/assets/fonts/themify.woff?-fvbane") format("woff"), url("/Content/assets/fonts/themify.ttf?-fvbane") format("truetype"), url("/Content/assets/fonts/themify.svg?-fvbane#themify") format("svg");
font-weight: normal;
font-style: normal;
}
[class^="ti-"], [class*=" ti-"] {
font-family: 'themify';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.ti-check:before {
content: "\e64c";
}
this is the HTML piece:
<link rel='nofollow' href="~/Content/icons.css" rel="stylesheet" />
<i class="ti-check"></i>
and these are my PDf converter settings:
BlinkConverterSettings settings = new BlinkConverterSettings
{
//WebKitPath = @"/bin/QtBinaries/",
EnableBookmarks = true,
EnableJavaScript = true,
Margin = new PdfMargins { All = (float)25.0 },
Orientation = PdfPageOrientation.Portrait,
PdfPageSize = PdfPageSize.A4,
};
HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)
{
ConverterSettings = settings,
};
PdfDocument pdfDoc = htmlConverter.Convert(contentHtml, this.Base_URL);
This same code works when I render it on an MVC view.
Attachment:
missing_icon_on_pdf_c84de0d2.zip
