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?
Font Awesome in PDF Output?
-
- Senior Propellus Maximus
- Posts: 3669
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Font Awesome in PDF Output?
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.
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
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Sr. Propeller Head
- Posts: 130
- Joined: Mon Apr 24, 2006 12:52 pm
- Location: Glen Mills, PA
Re: Font Awesome in PDF Output?
Thanks for the info posted here!
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!
Background:
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):
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):
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!
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).... this won't work in PDF output because MadCap's PDF engine doesn't know how to interpret the multiple classes...
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!
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.
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>
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;
}
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
Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output