A simple directive for FontAwesome 5 icons. Avoid writing a massive ngStyle declaration for your FontAwesome integration, and use the power of Angular to make interactive icon-based widgets.

Usage

1. Follow the instructions to include FontAwesome in your project following their instructions.

2. Include the angular-fontawesome module in your Angular app.

   angular.module('myApp', ['sw-fontawesome'])

3. Use the directive on any page which bootstraps your app.

   <fa name="spinner" spin ng-style="{'color': checkColor}"></fa>
   <!-- $scope.checkColor = 'blue' -->
   <!-- rendered -->
   <i class="fas fa-spinner fa-spin" style="color:blue;"></i>

Attributes

The fa directive's attributes map to the classes used by FontAwesome.

<fa name="ICON-NAME"
    alt="TEXT-ALTERNATIVE"
    size="1-5|large"
    flip="horizontal|vertical"
    rotate="90|180|270"
    set="fab|far|fal"
    spin
    border
    list
></fa>

name

The icon's name, such as fa-spinner or fa-square.

<fa name="github"></fa>
<!-- rendered -->
<i class="fas fa-github"></i>

alt

For accessibility support, you can now add an alt attribute, which will add a screen-reader friendly replacement text.

<fa name="github" alt="github website"></fa>
<!-- rendered -->
<i class="fas fa-github" aria-hidden="true"></i>
<span class="sr-only">github website</span>

notice: the 'sr-only' class will hide the text from anyone not using a screen reader. It is derived from Bootstrap, so if you're not using Bootstrap, you must add this style to your css:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

size

The icon's font size, either defined by a multiplier (1-5), or by the string "large".

<fa name="square" size="{{ currentSize }}"></fa>
<!-- $scope.currentSize = 3 -->
<!-- rendered -->
<i class="fas fa-square fa-3x"></i>

flip

Flip the icon horizontal or vertical.

<fa name="pencil" flip="vertical"></fa>
<!-- rendered -->
<i class="fas fa-pencil fa-flip-vertical"></i>

set

The icon set. By default the fas (solid) set is used

<fa name="twitter" set="fab" rotate="90"></fa>
<!-- rendered -->
<i class="fab fa-twitter"></i>

rotate

Rotate the icon 90, 180, or 270 degrees.

<fa name="floppy" rotate="90"></fa>
<!-- rendered -->
<i class="fas fa-floppy fa-rotate-90"></i>

spin

Animate the icon to spin. You don't need to provide true to use the boolean attributes:

<fa name="spinner" spin></fa>
<!-- rendered -->
<i class="fas fa-spinner fa-spin"></i>

You can pass in true or false to the attribute as well, allowing the spin class to be be easily toggleable.

<fa name="{{ isLoading ? 'spinner' : 'check' }}" spin="{{ isLoading }}"></fa>
<!-- rendered -->
<i class="fas fa-spinner fa-spin"></i>

border

<fa name="envelope" border></fa>
<!-- rendered -->
<i class="fas fa-envelope fa-border"></i>

fixed width

<fa name="book" fw></fa>
<!-- rendered -->
<i class="fas fa-book fa-fw"></i>

inverse

<fa name="home" inverse></fa>
<!-- rendered -->
<i class="fas fa-home fa-inverse"></i>

list

This directive autodetects if you're setup to do fa-li and then takes care of it for you.

<ul class="fa-ul">
  <li>
    <fa name="square"></fa>
    Text here
    <fa class="check"></fa>
  </li>
</ul>
<!-- rendered -->
<ul class="fa-ul">
  <li>
    <i class="fas fa-li fa-square"></i>
    Text here
    <!-- <fa>s that aren't the first <fa> in the <li> do not automatically get the fa-li class -->
    <i class="fas fa-check"></i>
  </li>
</ul>

stack

The faStack directive is used as a wrapper for stacked fonts used by FontAwesome.

<fa-stack size="1-5|large">
    <fa name="ICON_NAME" stack="1-5|large"></fa>
    <fa name="ICON_NAME" stack="1-5|large"></fa>    
</fa-stack>

When using as a wrapper, you must also specify the 'stack' attribute on the children, as described here. Failure to do so will render the fonts, just not one on top of another like we want them to.

TODO

• fa-stack tests
• pull="left", pull="right"
• full browser support list

License

MIT Licensed