Using Font Awesome icons

Font Awesome is a third-party icon repository that allows you to add scalable vector icons wherever you can access the WYSIWYG editor's code view.  By referencing specific icon class names, you can supplement your content with relevant icons or use the icons as links to things like your organization's social media sites.

By default, your digital workplace loads version 4.7.0 of Font Awesome.

Sections in this article: 

Finding an icon

Go to Font Awesome Icons 4.7.0 to see what icons are available.

Once you have found an icon, select it to view more details about it. Then, copy the provided HTML snippet. You will use this to insert the icon into your content. 

An icon's page in Font Awesome.

Using an icon

To add an icon to your content:

  1. In the WYSIWYG editor, select More Misc followed by  Code View.
  2. Paste the icon HTML that you copied into the editor.
  3. Between the <i> and </i> insert &nbsp;. For example: 
    <i class="fa fa-ship" aria-hidden="true">&nbsp;</i>
  4. Select Code View to switch back to the standard editing view.

To add an icon as a selectable link (e.g., social media links), add the class information that you copied to the link's anchor tag:

  1. In the WYSIWYG editor, add your link.
  2. Select More Misc followed by  Code View.
  3. Find the link you added.
  4. Paste only the class information from Font Awesome as a parameter of the anchor tag. For example: 
    <a class="fa fa-twitter" href="https://twitter.com/">Twitter</a>
  5. Select Igloo_WYSIWYGEditor_CodeViewEmbedIconSmall.svg Code View to switch back to the standard editing view.

If you are using the Widget Tabs enhancement, you can include Font Awesome icons in your tabs. See Widget Tabs enhancement for more information.

For more ways to use and modify these icons, see Font Awesome Examples. 

Social media icons in the footer

Your digital workplace's theme may have additional CSS that allows you to automatically hide the text portion of a link when it is in the footer. For this to work, your links must be wrapped in a div element that has the class footer-social, and the text portion of the link needs to be wrapped in a span element. 

For example:

<div class="footer-social">
    <a class="fa fa-twitter" href="https://twitter.com/igloosoftware"><span>Twitter</span></a> 
    <a class="fa fa-facebook" href="https://www.facebook.com/Igloo-Software-73048127223/"><span>Facebook</span></a> 
    <a class="fa fa-linkedin" href="https://www.linkedin.com/company/igloo-software"><span>Linkedin</span></a>
</div>

Results in:

A footer containing social media icons as links.