FontAwesome in PDF and HTML5 output

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

FontAwesome in PDF and HTML5 output

Post by Fiona »

I've come really unstuck here and would appreciate someone walking me through this.

I'm using Flare 2018r2.

I need to include FontAwesome in topics that will be used to produce PDF and HTML5 output. I've watched the webinar at https://www.madcapsoftware.com/webinars ... e-outputs/ but unfortunately the files he mentions as being available to download to see how he does it aren't available, so I'm trying from scratch. I have installed FontAwesome on my machine and think (!) that I've added it to my Flare project.

In my Flare project I have a single CSS in Resources\Stylesheets\BookStyles.css

I have installed the FontAwesome stylesheet in Resources\FontAwesome\css\FontAwesome.css, as shown in the webinar.

The first line of my stylesheet now reads: @import url('../../Resources/FontAwesome/css/FontAwesome.css');

I believe that I now have to define a class in BookStyles.css for every icon that I want to use, for example:

span.FAInlineBlack_applekey
{
font-family: FontAwesome;
font-size: 8pt;
color: #000000;
content: "\f179";
}

The topic's source code includes "Press the <span class="FAInlineBlack_applekey"></span> key", which I was expecting to produce an image of a small black apple; I'm not concerned that this didn't appear in the WYSIWYG version of the topic in Flare as several people have commented previusly that this doesn't happen. However, the generated PDF and HTML5 is also not displaying the icon.

Can anyone help me please? I'm rather out of my depth.

Thank you. Fiona
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome in PDF and HTML5 output

Post by NorthEast »

That video is for an older version 4.7 of Font Awesome, and the current version 5 is different to set up.
If you downloaded version 5, that's maybe why it's not working.

So if you're following the video, perhaps download 4.7 instead:
https://fontawesome.com/v4.7.0/

I'm actually still using FontAwesome 4.7 myself, so can't advise on the exact setup procedure for version 5.
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Post by Fiona »

Thanks Dave. I've downloaded version 4.7 now – are you able to advise me where I've gone wrong with my structure/inputs as this still isn't working?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome in PDF and HTML5 output

Post by NorthEast »

Your CSS for the span.FAInlineBlack_applekey will not work, even if you've set up FontAwesome correctly.

The content property only applies when you're using ::before and ::after psuedo elements; e.g.

Code: Select all

span.FAInlineBlack_applekey::before 
{ ...
See here: https://www.w3schools.com/cssref/pr_gen_content.asp

So maybe just check if it works first, before adding your own CSS - e.g.

Code: Select all

<i class="fa fa-apple"></i>
Also, setting up the FontAwesome CSS only works for HTML5 web outputs, and not PDFs. To use FontAwesome in PDFs, you also need to install FontAwesome (the TTF file) as a font in Windows.
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Post by Fiona »

Thank you Dave. I wasn't aware of the restriction of the content property...I want to be able to enter FontAwesome characters in the middle of a line of text so I guess this isn't the way to go!

Unfortunately it's the need for generating PDFs that is causing all my problems (I can get it working when it's only HTML). Flare doesn't seem to accept multiple classes for PDF generation, so <i class="fa fa-apple"></i> doesn't work. It's why I'm trying to import the FontAwesome stylesheet instead of just linking to it. I've installed the font as well.

Surely there must be a straightforward way to insert an in-line FontAwesome character in a topic that generates correctly in HTML5 and PDF?! Preferably a single style so that I can just enter specific character codes as I need to rather than having to define a style for each character, but I'll take whatever's possible...<rant over>. How do other people get the icons for the Windows key/MAc apple key/ Mac control key/etc. into their documents when an image really isn't a viable option?

Maybe my question should be "Has anyone successfully produced PDF output that includes in-line FontAwesome characters and, if so, please let me know how?"
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome in PDF and HTML5 output

Post by NorthEast »

Fiona wrote:Thank you Dave. I wasn't aware of the restriction of the content property...I want to be able to enter FontAwesome characters in the middle of a line of text so I guess this isn't the way to go!

Unfortunately it's the need for generating PDFs that is causing all my problems (I can get it working when it's only HTML). Flare doesn't seem to accept multiple classes for PDF generation, so <i class="fa fa-apple"></i> doesn't work. It's why I'm trying to import the FontAwesome stylesheet instead of just linking to it. I've installed the font as well.

Surely there must be a straightforward way to insert an in-line FontAwesome character in a topic that generates correctly in HTML5 and PDF?! Preferably a single style so that I can just enter specific character codes as I need to rather than having to define a style for each character, but I'll take whatever's possible...<rant over>. How do other people get the icons for the Windows key/MAc apple key/ Mac control key/etc. into their documents when an image really isn't a viable option?

Maybe my question should be "Has anyone successfully produced PDF output that includes in-line FontAwesome characters and, if so, please let me know how?"
But you can do this, you just need to use ::before in your CSS.
Try adding ::before to your CSS as suggested, and see what happens:

Code: Select all

span.FAInlineBlack_applekey::before
{ ...
The above will work for PDF too, provided you've installed FontAwesome (the TTF file) as a font in Windows.
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Post by Fiona »

An update from Flare: "In Flare 2019, the Font Awesome characters are not appearing in the XML Editor nor PDF output. This is a known bug (#150985)."

Guess I either have to revert to an earlier version of Flare (which I can't do as we're using microcontent) or wait for the bug to be fixed :-(
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome in PDF and HTML5 output

Post by NorthEast »

FontAwesome (4.7) works fine for me in PDFs, using Flare 2019.
Fiona
Sr. Propeller Head
Posts: 117
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Post by Fiona »

Dave Lee wrote:FontAwesome (4.7) works fine for me in PDFs, using Flare 2019.
The update they provided referred to Font Awesome version 5, which is the version I need to use as it has our corporate logo in it.
mwmartz
Propeller Head
Posts: 41
Joined: Wed Sep 12, 2007 12:51 pm
Location: Around and about Atlanta, Georgia, USA

Re: FontAwesome in PDF and HTML5 output

Post by mwmartz »

I need to be able to do this, too, and haven't even gotten as far as Fiona. Would be great if MadCap fixes the bug and posts an updated webinar on how to do this. I'm using Flare 2019r2.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome in PDF and HTML5 output

Post by NorthEast »

FontAwesome (4.7) still works fine for me in PDFs, now using Flare 2019r2.
mwmartz
Propeller Head
Posts: 41
Joined: Wed Sep 12, 2007 12:51 pm
Location: Around and about Atlanta, Georgia, USA

Re: FontAwesome in PDF and HTML5 output

Post by mwmartz »

Dave Lee wrote:FontAwesome (4.7) still works fine for me in PDFs, now using Flare 2019r2.
I need to be able to do this with HTML5 and the latest Fontawesome.
hoffie4
Propeller Head
Posts: 27
Joined: Wed Sep 07, 2016 12:29 pm
Location: San Diego, CA

Re: FontAwesome in PDF and HTML5 output

Post by hoffie4 »

I'm running into the same issue. FontAwesome was easy to set up and works as expected in HTML5, but nothing I do can get it to work in PDF. I tried installing the older v4.7 of FontAwesome and that didn't work with Flare 2023r2, but even if it did I need to use the latest version.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: FontAwesome in PDF and HTML5 output

Post by Nita Beck »

hoffie4 wrote: Fri Nov 10, 2023 5:00 pm I'm running into the same issue. FontAwesome was easy to set up and works as expected in HTML5, but nothing I do can get it to work in PDF. I tried installing the older v4.7 of FontAwesome and that didn't work with Flare 2023r2, but even if it did I need to use the latest version.
Be sure to install the font (this is true of any font) for "all users" on Windows, not just yourself. Does that fix it?
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: FontAwesome in PDF and HTML5 output

Post by NorthEast »

I'm still using FontAwesome 4.7, and it works fine for me in PDFs using Flare 2023r2.

As Nita mentions, you need to install the TTF file in Windows for all users.

I can't comment on later versions of FA or how you set them up.
Post Reply