# Displaying Icons

## 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.

{% code title="template.hbs" %}

```markup
{{fa-icon icon="info"}}
```

{% endcode %}

## Sizing Icons

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

{% code title="template.hbs" %}

```
{{fa-icon icon="info" size="2x"}}
{{fa-icon icon="info" size="3x"}}
{{fa-icon icon="info" size="4x"}}
```

{% endcode %}

## Spinning and Rotating Icons

To make an icon spin you can add the `spin=true` parameter.&#x20;

{% code title="template.hbs" %}

```markup
{{fa-icon icon="sync" spin=true}}
```

{% endcode %}

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.

{% code title="template.hbs" %}

```
{{fa-icon icon="square" rotation=90}}
{{fa-icon icon="square" rotation=180}}
{{fa-icon icon="square" rotation=270}}
```

{% endcode %}

## 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.

{% code title="template.hbs" %}

```markup
<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>
```

{% endcode %}

## 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.

{% code title="template.hbs" %}

```markup
<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>
```

{% endcode %}

{% hint style="info" %}
For more information on how to use the `{{fa-icon}}` helper please see <https://github.com/FortAwesome/ember-fontawesome>
{% endhint %}