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.
Font-Awesome Every Which Way but Loose
Re: Font-Awesome Every Which Way but Loose
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.
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.
Re: Font-Awesome Every Which Way but Loose
Thanks for your response. Just to confirm . . . Font-Awesome TTF is not installed in your O/S fonts folder?
Re: Font-Awesome Every Which Way but Loose
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 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.
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 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.