Font Awesome (sigh) in a single topic

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Font Awesome (sigh) in a single topic

Post by chuck_agari »

Flare 2018, Windows 10 Pro, VMware, MBP

So I followed Danial Ferguson's instructions (https://www.smartoutput.com/using-fonta ... ml-output/) exactly. (Well, not quite; the current CDN does not have the defer attribute that he documents adjusting for Flare's XHTML.) Because I (currently) want a few icons in just one topic, I added the CDN in the head of the topic:

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5 ... /solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5 ... wesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous" />
</head>

Then I added this as test code (in a table cell): <i class="fa fa-sign-out" title="user.sudorg_logout"></i>

In the XML editor, I see only the <i></i> start end end tags, which seem weird. The code looks fine though; Flare didn't decide it needed to "fix" anything. I sort of expected that the XML editor wouldn't be able to render this. But when I preview the HTML5 topic. there's nothing in the table cell.

So I do a build. I still see nothing in the table cell in the topic (in Firefox). I look at the source code. This is what I see in the output head:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>View User Activity</title>
<script>/* <![CDATA[ */
document.title = "Customer Protect Help - " + document.title;
/* ]]> */</script>
<link href="../../Skins/Default/Stylesheets/Slideshow.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/TextEffects.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Topic.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Styles.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Tablet.css" rel="stylesheet" />
<link href="../../Skins/Default/Stylesheets/Components/Mobile.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/foundation.6.2.3.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/Styles.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/Tablet.css" rel="stylesheet" />
<link href="../../Skins/Fluid/Stylesheets/Mobile.css" rel="stylesheet" />
<link href="../Resources/Stylesheets/agari.css" rel="stylesheet" />
<style>/*<meta />*/

.button.previous-topic-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/navigate-previous.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}

.button.next-topic-button
{
-pie-background: url('../../Skins/Default/Stylesheets/Images/navigate-next.png') no-repeat center center, linear-gradient(#ffffff, #ececec);
}

.needs-pie
{
behavior: url('../../Resources/Scripts/PIE-no-motw.htc');
}

</style>
<link href="https://use.fontawesome.com/releases/v5 ... /solid.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5 ... wesome.css" rel="stylesheet" />
<script src="../../Resources/Scripts/custom.modernizr.js">
</script>
<script src="../../Resources/Scripts/jquery.min.js">
</script>
<script src="../../Resources/Scripts/require.min.js">
</script>
<script src="../../Resources/Scripts/require.config.js">
</script>
<script src="../../Resources/Scripts/foundation.6.2.3_custom.js">
</script>
<script src="../../Resources/Scripts/plugins.min.js">
</script>
<script src="../../Resources/Scripts/MadCapAll.js">
</script>
</head>

There, as the first two entries in the script tag, references to Font Awesome. Only thing is, Flare stripped out two of the attributes.

Down in the table, the code is untouched:

<td><i class="fa fa-sign-out" title="user.sudorg_logout"></i>

So....what's going on?
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: Font Awesome (sigh) in a single topic

Post by chuck_agari »

Follow up: I also found this, from MadWorld a year ago: https://www.madcapsoftware.com/blog/201 ... e-outputs/

It's not specific to Font Awesome. But it does state that for HTML5 output, the fonts must be downloaded and placed in a Fonts folder. Is this going to be my solution? Will I not be able to refer to CDNs? I mean I can do this pretty easily: https://fontawesome.com/how-to-use/on-t ... e-yourself

BTW, I forgot to mention, I got a really odd error message when I tried to preview the HTML5 topic:

Cannot copy file

Unable to connect to https://use/fontawesome.com/releases/v5 ... id-900.eot. Please make sure you have connected to this server in SharePoint Explorer.
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: Font Awesome (sigh) in a single topic

Post by chuck_agari »

chuck_agari wrote:Follow up: I also found this, from MadWorld a year ago: https://www.madcapsoftware.com/blog/201 ... e-outputs/

It's not specific to Font Awesome. But it does state that for HTML5 output, the fonts must be downloaded and placed in a Fonts folder. Is this going to be my solution? Will I not be able to refer to CDNs? I mean I can do this pretty easily: https://fontawesome.com/how-to-use/on-t ... e-yourself
Woo! This worked?
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Font Awesome (sigh) in a single topic

Post by Psider »

Can I just say I'm enjoying following The Continuing Adventures of Chuck Agari? :)
Seriously though, thanks for posting all the things you're trying.
AlexFox
Sr. Propeller Head
Posts: 148
Joined: Thu Oct 19, 2017 1:56 am

Re: Font Awesome (sigh) in a single topic

Post by AlexFox »

So I use a combination of approaches for FontAwesome to work.

I have the fonts installed on my system for print output. I also have the webfonts hosted with my documentation so I can reference them via font-face and use them in pseudo elements etc. I also have the JS method configured so I can use the <i></i> tags. Any help you need, let me know and yes, it is normal to see just the <i></i> tags in Flare as the i2svg conversion is handled by the browser after the project is built.
chuck_agari
Sr. Propeller Head
Posts: 225
Joined: Wed May 30, 2018 2:40 pm

Re: Font Awesome (sigh) in a single topic

Post by chuck_agari »

Psider wrote:Can I just say I'm enjoying following The Continuing Adventures of Chuck Agari? :)
Seriously though, thanks for posting all the things you're trying.
As much as I post when I need some help, I know that the trials--and solutions--could possibly help others, and that's what forums such as this are really all about, and so I try to share as much of the excruciating detail as I can.
Post Reply