Font-Awesome Every Which Way but Loose

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
agambina
Propeller Head
Posts: 16
Joined: Wed Aug 30, 2017 12:03 pm

Font-Awesome Every Which Way but Loose

Post by agambina »

Hello,

I'm not getting FA to work using Flare v12r2/Win 10. I've watched the presentation by Mike Kelley and read the article by Daniel Ferguson, describing different approaches to implementing Font-Awesome. I had FA in my Windows Font folder. When I first found it and tried to remove, Windows said the font was being used. I closed Flare and was able to delete the font. Then I tried Mike's way (linking to cdn source) and then Daniel's way. Still ... no success. I even ran a Repair. My current attempt looks like this:

Master Page & Topic = <script src="https://use.fontawesome.com/bf7f364abb.js"> </script>
Topic = <div class="topborder"><i class="fa fa-retweeet"></i>solutions delivery</div>

Any advice? I've been at this for the past 4 hours!

Mike Kelley Font-Awesome: https://mike.kelley.consulting/blog/whe ... usy-season
Daniel Ferguson Font-Awesome: https://www.smartoutput.com/single-post ... TML-output

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

Re: Font-Awesome Every Which Way but Loose

Post by NorthEast »

I've used Font Awesome for a long time, but I downloaded the CSS and include that in my Flare project. I include the links to the CSS in the head of my master page.

For me, adding the Font Awesome JS just didn't work, and I tried it in both the head and body of the master page.
Curiously, if I edited the fa classes in the browser dev tools, the icons would then appear - but they wouldn't appear on page load, which is a bit fishy.

I've also tried using 3rd-party CDN links before, but had problems with those too - they seemed to be blocked by browsers for breaking cross-site/origin restrictions.

Anyway, unless someone knows why using the JS doesn't work, I'd suggest downloading the CSS and adding it to your project.
agambina
Propeller Head
Posts: 16
Joined: Wed Aug 30, 2017 12:03 pm

Re: Font-Awesome Every Which Way but Loose

Post by agambina »

Thanks for your response. Just to confirm . . . Font-Awesome TTF is not installed in your O/S fonts folder?
agambina
Propeller Head
Posts: 16
Joined: Wed Aug 30, 2017 12:03 pm

Re: Font-Awesome Every Which Way but Loose

Post by agambina »

UPDATE
I had success getting Font-Awesome to work the "Mike Kelley" way. In summary for Flare v12r2 using one of the new project templates:

1. Add hosted Font Awesome link to Master Page: <link href="Either Bootstrap or AJAX CDN source" rel="stylesheet" />
I verified that both of these work:
Bootstrap: https://maxcdn.bootstrapcdn.com/font-awesome.min.css
AJAX: https://cdnjs.cloudflare.com/ajax/libs/ ... me.min.css
2. Use class in HTML (div, p, h1, etc) for font-awesome icon. Syntax I used within a DIV containing several items was: <p class="tile-icon"><i class="fa fa-retweet" aria-hidden="true"></i></p>
3. Stylesheet declaration = p.tile-icon
4. XML Editor does not show the font-awesome icon :shock: Use "Preview as Primary Target" or Build and then View Output.

Flare reported an 'Invalid CSS' error for both font-awesome stylesheet sources: Line 4, Char 2873, missing left brace ({). The error had no impact on functionality or output.
Post Reply