Displaying Icons

Make use of Font Awesome icons in your templates

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: https://fontawesome.com/icons?d=gallery

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: https://fontawesome.com/icons?d=gallery&c=spinners

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://github.com/FortAwesome/ember-fontawesome