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?
Font Awesome (sigh) in a single topic
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Font Awesome (sigh) in a single topic
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.
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.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Font Awesome (sigh) in a single topic
Woo! This worked?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
Re: Font Awesome (sigh) in a single topic
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.
Seriously though, thanks for posting all the things you're trying.
Re: Font Awesome (sigh) in a single topic
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.
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.
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Font Awesome (sigh) in a single topic
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.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.