FontAwesome in PDF and HTML5 output

This forum is for all Flare issues related to styles, stylesheets and XML.

FontAwesome in PDF and HTML5 output

Postby Fiona on Wed Mar 20, 2019 4:55 am

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
Fiona
Propeller Head
 
Posts: 82
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Postby Dave Lee on Wed Mar 20, 2019 6:44 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: FontAwesome in PDF and HTML5 output

Postby Fiona on Wed Mar 20, 2019 7:47 am

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?
Fiona
Propeller Head
 
Posts: 82
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Postby Dave Lee on Thu Mar 21, 2019 7:05 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: FontAwesome in PDF and HTML5 output

Postby Fiona on Thu Mar 21, 2019 8:06 am

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?"
Fiona
Propeller Head
 
Posts: 82
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Postby Dave Lee on Fri Mar 22, 2019 12:27 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: FontAwesome in PDF and HTML5 output

Postby Fiona on Thu Jun 20, 2019 11:58 pm

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 :-(
Fiona
Propeller Head
 
Posts: 82
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.

Re: FontAwesome in PDF and HTML5 output

Postby Dave Lee on Mon Jun 24, 2019 12:13 am

FontAwesome (4.7) works fine for me in PDFs, using Flare 2019.
Dave Lee
Master Propellus Maximus
 
Posts: 5657
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: FontAwesome in PDF and HTML5 output

Postby Fiona on Thu Jun 27, 2019 1:00 am

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.
Fiona
Propeller Head
 
Posts: 82
Joined: Tue Jan 27, 2015 7:44 am
Location: U.K.


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: doc_guy and 4 guests