FontAwesome has become extremely popular and useful over the last few years. I’m getting more and more questions from clients and others in the Flare community about how to use FontAwesome in MadCap Flare projects. This article helps get you started.
What is FontAwesome?
FontAwesome is a collection of scalable vector icons and graphics that can be styled with CSS. There are hundreds of vector icons available (take a look). Because they are vector, you can scale them to any size that you need without losing any of that crisp fidelity that we all like in graphics. FontAwesome also saves you from having to load a bunch of .png icon files into you Flare project, especially if you need different color icons for hover effects.
Examples of FontAwesome in Flare projects
I’ve used FontAwesome in a number of different ways in Flare projects recently.
On a TriPane redesign project I did, the client requested FontAwesome icons for the expand/collapse icons:
In another project, we used FontAwesome as the social media icon links. The green color is applied in the CSS in Flare:
We used FontAwesome for social media icons in another project as well, only in this one, we added a color switch using the :hover pseudo-class in the CSS. The icons are gray by default…
… but turn red when hovered over:
Using FontAwesome in your Flare project
FontAwesome works by calling a JavaScript “embed code” (FontAwesome term) from your Flare pages. That JavaScript file alerts the browser to look for specific HTML elements and/or CSS styles. When it finds matching HTML or CSS, it automatically downloads the font icon and displays it on the page.
Follow these steps to start using FontAwesome in your Flare Project.
Step 1: Get your FontAwesome JavaScript embed code
Go to http://fontawesome.io/get-started/ and copy the CDN code. It will look something like this:
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
Note that you’ll need to make a slight adjustment to the CDN code that FontAwesome provides. Flare topic files are in XHTML, and XHTML doesn’t allow attribute minimization. To get around this, change the defer attribute to defer="defer". In the end, your CDN script will look like this:
<script defer="defer" src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
Step 2: Add your FontAwesome embed code to your Flare MasterPage or topic files
If you’re going to be using FontAwesome icons on most or all pages of your HTML output (like in a footer), then add your embed code to your MasterPage. If you’ll be using it only on a few topics in your project, you’ll probably want to use the embed code only on those pages (although you can put it in the MasterPage if you want).
In Flare, right-click your MasterPage/Topic and select Open With > Internal Text Editor. Copy-and-paste your embed code into the <head></head> section:
Step 3: Add FontAwesome elements to your topics
You add FontAwesome icons to your topics, MasterPages, and snippets using an <i>tag with the associated class for the icon you want to use.
For example, if you wanted to use the GitHub icon in your project, you would first go to the FontAwesome icon page at http://fontawesome.io/icons/ and search for GitHub. On that page, click the specific GitHub icon you want to use. From the page that opens, copy the <i> element that is shown. In this example, it is <i class="fa fa-github" aria-hidden="true"></i>.
Now that you have the <i> code that you need, you can paste that in your Flare MasterPage, topic, or snippet using the Text Editor in Flare.
In the gray / red example above, here is what we added to the MasterPage. You can see the <i> tag for each icon:
<div class="fusion-footer">
<ul>
<li>
<a href="https://www.facebook.com/company" target="_blank" title="Facebook" alt="Facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://twitter.com/company" target="_blank" title="Twitter" alt="Twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://www.linkedin.com/company/" target="_blank" title="LinkedIn" alt="LinkedIn">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="https://plus.google.com/company" target="_blank" title="Google Plus" alt="Google+">
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
There are a lot of examples on the FontAwesome website on how you can use more specific style classes to get exactly the icon behavior you’re looking for. See http://fontawesome.io/examples/.
Just for the sake of completeness, here is the accompanying CSS for the HTML example above:
div.fusion-footer /*styles for the footer bar*/
{
text-align: center;
background-color: #282a2b;
padding-top: 18px;
padding-bottom: 16px;
margin-top: 60px;
}
div.fusion-footer ul li /*styles for the individual icons in the footer*/
{
display: inline; /*makes the social media icons align horizontally rather than vertically*/
margin-right: 20px; /*adds 20px right margin to each social media icon for spacing*/
}
div.fusion-footer ul li:nth-last-child(1)
{
margin-right: 0px; /*removes the right margin for the last social media icon*/
}
div.fusion-footer a,
div.fusion-footer a:visited /*applies default color to social media icons*/
{
color: #46494a;
}
div.fusion-footer a:hover /*applies red when hovering over links in the footer*/
{
color: #ed3424;
}
Inserting FontAwesome using only CSS
There is a way to insert FontAwesome icons using just CSS in Flare, but I’m going to post those instructions in another blog post to keep this post from getting too long. Stay tuned!
Conclusion
Using FontAwesome in your Flare project does take a little work, and it requires you to get down into the code of your project files. But once you understand how it works and how to insert them into your project, it runs very smoothly and quickly. I personally find it a lot easier to manage icons using FontAwesome than I do using a bunch of .png files.