Font Awesome in PDF Output?

This forum is for Single-Sourcing your Flare content to multiple outputs.
Post Reply
peaveygtr
Propeller Head
Posts: 10
Joined: Tue Oct 25, 2016 7:58 am

Font Awesome in PDF Output?

Post by peaveygtr »

I'm single sourcing through one stylesheet. For Font Awesome calls, I'll refer to the web link. This works fine for my html5, but all of the fonts do not display in PDF output.

If I'm expecting all of those fonts to appear in the print output from the same css file, do I need to install the fonts on my computer? Or do I need to pull the entire CSS file to refer to a directory location instead of the weblink in maincss?
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Font Awesome in PDF Output?

Post by Nita Beck »

I just learned, by watching Mike Kelley's recorded webinar on "Font Iconography", that if one is coding the Font Awesome characters in such a way as to use multiple classes (e.g., <i class="fa fa-home">, this won't work in PDF output because MadCap's PDF engine doesn't know how to interpret the multiple classes and, therefore, applies no classes at all. But Mike offers a detailed workaround about how to craft CSS for PDF that will get the Font Awesome characters to appear.

Check it out here: http://www.madcapsoftware.com/webinars/ ... e-outputs/

I feel the hour I spent watching and the couple of hours I spent playing with Mike's techniques were well worth the effort.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

Re: Font Awesome in PDF Output?

Post by TheGreatAndPowerfulOz »

Thanks for the info posted here!
... this won't work in PDF output because MadCap's PDF engine doesn't know how to interpret the multiple classes...
One thing I discovered in implementing a custom font in Flare myself is that the multiple-classes issue for PDF output has been resolved. Hooray! (I'm not sure in exactly which version, but it was recently).

Alas, there is still one issue I'm having with PDF output, which I'm hoping someone smarter than me can help to sort out! :D

Background:
  • I actually created my own font with a small set of custom glyphs used by my company. It works exactly like Font Awesome, as described by Mike Kelley in his webinar on "Font Iconography", only my class names are different.
  • In addition to using an "<i>" element with appropriate class names within a "<p>" element (or any other), I decided to whip up a little CSS that would allow me to apply classes to a "<div>" element directly, for things like "notes", "tips" and "warnings".
  • I defined an "icon" class to take care of all the common properties (e.g., alignment, size, margins, etc.), which I apply to every element where I want a glyph to display (in the same way Font Awesome uses the class "fa").
  • The other classes I created specify the unicode value for each glyph. They are named "icon-note", "icon-tip", "icon-warning", etc., and I apply one of them, in addition to the "icon" class, to display the appropriate image for a given element.
Here is some sample code, to show what I tried to articulate above:

Code: Select all

<p><i class="icon icon-note"></i> Lorem ipsum dolor sit amet, consectetur...</p>
<div class="icon icon-note">
    <p>Lorem ipsum dolor sit amet, consectetur...</p>
</div>
So, my issue is that this all works splendidly in HTML5 output, but the "<div>" layout goes a little wonky in PDF output. The first screen shot below represents HTML5 output of this sample code (all good), and the second is PDF output (notice the ill-positioned "note" glyph):
HTML5Output.png
PDFOutput.png
Here is the CSS for the "<div>" element, which in my mind should work for both HTML5 and PDF outputs (in fact, it does, except for the glyph positioning):

Code: Select all

div.icon {
    background-color: #686868;
    color: #ffffff;
    margin-bottom: 1em;
    overflow: auto;
    padding-left: 3.25em;
    padding-right: .5em;
    position: relative;
}

    div.icon::before {
        font-size: 1.5em;
        left: .5em;
        position: absolute;
        top: .5em;
        text-align: center;
        width: 1em;
    }
Any ideas as to what might be going wrong with the PDF output? I'm so close—but this last little niggly bit is driving me up a wall!
You do not have the required permissions to view the files attached to this post.
Austin Wright

Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
Post Reply