Using Font Awesome with Flare

[alex]

Hello,
Does anyone have any actual experience using Font Awesome in Flare 10.2.x?

I need to be able to include Font Awesome icons in the following outputs: HTML5, PDF, and Word. I also need to be able to stack and rotate some of them.

I've tried everything I've seen on the Font Awesome site and examples, but I'm still running into some issues. I've even tried using the information I've seen in the Google fonts posts in this discussion forum, hoping Google Fonts and Font Awesome might work the same way. Maybe they do and I'm just not doing something correctly.

Method 1 - "add the Font Awesome font, css, & related files to your project; copy the icon image from the Font Awesome cheatsheet; and then apply the Font Awesome font to the little rectangle"
This works in all three outputs, but it does not seem to allow for stacking and rotating. Notice I said "seem" - hopefully this is user error and not a bug

Method 2 - "link the Font Awesome css to your stylesheet and use this format: <i class="fa fa-camera-retro"></i> fa-camera-retro"
This works in the HTML5 output and does allow for stacking and rotating (or at least sort of), but nothing shows up in the PDF and Word outputs.

Method 3-6 - "combinations of things that don't get me any closer than the previous two methods"

If you've gotten this to work, please let me know how you've done it!

Thanks,
Alex

[alex]

Update: I submitted a support request and was told that the advanced CSS involved is not yet supported in the print outputs in Flare 10. So, FontAwesome is fine to use if you're only generating HTML5 help, but you're out of luck if you're trying to do what I was. Hopefully, this will be resolved sometime in the near future.

Big ups to the lightning-speed response and thorough explanation provided by MadCap Support (on Christmas Eve, no less)!

[Mike Kelley]

I seem to remember Dave Lee saying (recently?) something to the effect of multiple classes assigned to a single element not being honored in PDF outputs. FontAwesome uses multiple class values in a single element to work. Maybe that's the real culprit? I wouldn't consider that "advanced CSS" though. Just seems like an odd shortcoming in Flare.

[alex]

I seem to remember Dave Lee saying (recently?) something to the effect of multiple classes assigned to a single element not being honored in PDF outputs. FontAwesome uses multiple class values in a single element to work. Maybe that's the real culprit? I wouldn't consider that "advanced CSS" though. Just seems like an odd shortcoming in Flare.

Mike, this is the response I received from MadCap Support when I sent them the sample project. Just thought I'd let you know that the "advanced CSS" designation came directly from MadCap


"The project provided includes advanced CSS3 that printed output does not currently support. The latest versions of web browsers support the css3 attributes which is why the HTML5 output displays as expected.

I have submitted a feature request (67514) on your behalf to our Product Managers who work with our Research and Development team regarding future versions of our products regarding CSS3 support for the editor and the output.
Please use the link below to submit any future feature suggestions. Your request will go directly to our Product Managers.
https://www.madcapsoftware.com/feedback ... quest.aspx

The recommended work flow would be to insert the icons into the topic files as necessary and reference the images. Bootstrap is currently supported for online elements and not printed outputs."

[NorthEast]

I seem to remember Dave Lee saying (recently?) something to the effect of multiple classes assigned to a single element not being honored in PDF outputs. FontAwesome uses multiple class values in a single element to work. Maybe that's the real culprit? I wouldn't consider that "advanced CSS" though. Just seems like an odd shortcoming in Flare.

Yep, using multiple classes only works for web-based outputs; and it looks like that's required for stacking, rotating, and most other things.

I'd guess that you have to install the font file (TTF, or whatever) in Windows in order for Flare to be able to 'see' it and use it in the PDF; i.e. what FontAwesome call the 'desktop friendly' method, so you're inserting the actual characters (not using CSS): http://fortawesome.github.io/Font-Awesome/cheatsheet/.

[alex]

I seem to remember Dave Lee saying (recently?) something to the effect of multiple classes assigned to a single element not being honored in PDF outputs. FontAwesome uses multiple class values in a single element to work. Maybe that's the real culprit? I wouldn't consider that "advanced CSS" though. Just seems like an odd shortcoming in Flare.

Yep, using multiple classes only works for web-based outputs; and it looks like that's required for stacking, rotating, and most other things.

I'd guess that you have to install the font file (TTF, or whatever) in Windows in order for Flare to be able to 'see' it and use it in the PDF; i.e. what FontAwesome call the 'desktop friendly' method, so you're inserting the actual characters (not using CSS): http://fortawesome.github.io/Font-Awesome/cheatsheet/.

Yes, Dave, I have gone the route of using the cheatsheet ('copy icon > paste into topic > apply FontAwesome font to little rectangle'), but it still doesn't work for rotating and stacking, so I used the workaround recommended by MadCap Support to make those specific icons into images (which looks crappy compared to the beautiful FA icons, but at least they are somewhat recognizable).