LogoLogo
Enterprise GuideCommunity Edition GuideDeveloper Guide
  • Using The Polarity Developer Guide
  • Quick Start
    • What's New
    • Installing Integrations
    • Quick Start Guide
    • Learning Resources
  • Building an Integration
    • Directory Layout
    • package.json
    • Configuration File
    • Integration Main Module
      • startup
      • doLookup
        • Entity Objects
        • Result Objects
        • Error Objects
      • onDetails
      • onMessage
      • validateOptions
    • Customizing the Overlay Window
      • Templates
        • Conditionals
        • Displaying a List of Items
        • Display Object Properties
        • Built-in Helpers
        • Displaying Icons
      • Component File
        • Aliased Properties
        • Computed Properties
        • Event Hooks
      • CSS Styles
    • Vendor Javascript
      • Inserting Javascript into DOM
    • README Guide
    • Debugging Integrations
      • Web Inspector
      • Using Integration Logs
      • Testing Main Module
  • Recipes
    • Enabling User Actions
    • Throttling Lookups
    • Using Custom Entity Types
    • Custom Summary Tags
    • Creating a Tabbed Interface
    • Accessing Username of Requestor
Powered by GitBook
On this page
  • General Usage
  • Sizing Icons
  • Spinning and Rotating Icons
  • Fixed Width Icons
  • Icons in List
  1. Building an Integration
  2. Customizing the Overlay Window
  3. Templates

Displaying Icons

Make use of Font Awesome icons in your templates

PreviousBuilt-in HelpersNextComponent File

Last updated 3 years ago

General Usage

You can make use of font-awesome 5 icons in your template through the fa-icon helper. For a list of available icons please see:

To use the icon helper you must pass in the name of the icon you wish to display. For example, to display the "info" icon you would do the following.

template.hbs
{{fa-icon icon="info"}}

Sizing Icons

You can change the size of the icon by passing in the size parameter

template.hbs
{{fa-icon icon="info" size="2x"}}
{{fa-icon icon="info" size="3x"}}
{{fa-icon icon="info" size="4x"}}

Spinning and Rotating Icons

To make an icon spin you can add the spin=true parameter.

template.hbs
{{fa-icon icon="sync" spin=true}}

For a list of icons that work well as spinners please see:

You can also rotate icons a fixed amount using the rotation parameter.

template.hbs
{{fa-icon icon="square" rotation=90}}
{{fa-icon icon="square" rotation=180}}
{{fa-icon icon="square" rotation=270}}

Fixed Width Icons

Oftentimes you will want to use a list of icons where the icons are all the same width. You can accomplish this using the fixedWidth=true parameter.

template.hbs
<ul>
    <li>{{fa-icon icon="info" fixedWidth=true}} Info</li>
    <li>{{fa-icon icon="question" fixedWidth=true}} Help</li>
    <li>{{fa-icon icon="bell" fixedWidth=true}} Alerts</li>
</ul>

Icons in List

If you'd like to replace the default bullets in a list with icons you can do that as well using the fa-ul and fa-li classes.

template.hbs
<ul class="fa-ul">
    <li><span class="fa-li">{{fa-icon icon="check-square"}}</span>List icons can</li>
    <li><span class="fa-li">{{fa-icon icon="check-square"}}</span>be used to</li>
    <li><span class="fa-li">{{fa-icon icon="spinner" spin=true}}</span>replace bullets</li>
    <li><span class="fa-li">{{fa-icon icon="square"}}</span>in lists</li>
</ul>

For more information on how to use the {{fa-icon}} helper please see

https://fontawesome.com/icons?d=gallery
https://fontawesome.com/icons?d=gallery&c=spinners
https://github.com/FortAwesome/ember-fontawesome