angular-fontawesome TravisCI

Avoid writing boilerplate classes for your FontAwesome integration, and use the power of Angular to make interactive icon-based widgets.

  1. Include the FontAwesome CSS and fonts in your application by following their instructions.
  2. Include the angular-fontawesome module in your Angular app.
    angular.module('myApp', ['picardy.fontawesome']);
  3. Use the directive on any page which bootstraps your app.
    <script>
    angular.module('myApp', ['picardy.fontawesome'])
      .controller('MyController', function($scope) {
        $scope.spinnerColor = 'forestgreen';
      });
    </script>
    
    <div ng-controller="MyController">
      <fa name="pied-piper-alt"
       alt="Loading"
       size="4"
       spin
       ng-style="{'color': spinnerColor}"></fa>
    </div>

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"
  spin
  border
  list></fa>

name

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

<fa name="fighter-jet"></fa>

size

Resize the icon.

<fa name="line-chart" size="1"></fa>
<fa name="line-chart" size="2"></fa>
<fa name="line-chart" size="3"></fa>
<fa name="line-chart" size="4"></fa>
<fa name="line-chart" size="5"></fa>

alt

For accessibility support, add an alt attribute, which will add screen-reader friendly replacement text in a separate element.

<fa name="github" alt="github website"></fa>
 (inspect the source to see the .sr-only tag)
Note

The sr-only class should hide the text from anyone not using a screen reader. It is taken 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;
}

flip

Flip the icon 'horizontal' or 'vertical'

<fa name="pencil"></fa>
<fa name="pencil" flip="horizontal"></fa>
<fa name="pencil" flip="vertical"></fa>

rotate

Rotate the icon 90, 180, or 270 degrees.

<fa name="floppy-o"></fa>
<fa name="floppy-o" rotate="90"></fa>
<fa name="floppy-o" rotate="180"></fa>
<fa name="floppy-o" rotate="270"></fa>

spin

Animate the icon to spin.

You don't need to provide true to use the boolean attributes in angular-fontawesome:

<fa name="spinner" spin></fa>

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

<script>
angular.module('myApp', ['picardy.fontawesome'])
  .controller('MyController', function($scope) {
    $scope.isLoading = false;

    // simulate loading.
    $scope.reload = function () {
      $scope.isLoading = true;

      $timeout(function () {
        $scope.isLoading = false;
      }, 1000);
    };
  });
</script>

<div ng-controller="MyController">
  <button class="btn" ng-disabled="isLoading" ng-click="reload()">
    <fa name="{{ isLoading ? 'spinner' : 'check' }}"
     spin="{{ isLoading }}"></fa>
    <span ng-hide="isLoading">reload</span>
  </button>
</div>

border

<fa name="envelope" border></fa>

fixed width

<fa name="book" fw></fa><br>
<fa name="coffee" fw></fa><br>
<fa name="pinterest" fw></fa>
BEFORE


AFTER (so alignment)


inverse

<div class="well" style="background-color: #555;">
  <fa name="home" inverse></fa>
</div>

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" list></fa>
    Text here
  </li>
  <li>
    <fa name="check" list></fa>
    Another item
    <fa name="map-signs"></fa>
  </li>
  <li>
    <fa name="square" list></fa>
    A third
  </li>
</ul>
  • Text here
  • Another item
  • A third

stack

The faStack directive is used as a wrapper for FontAwesome's stacked icon behavior.

<fa-stack size="large">
  <fa name="square-o" stack="2"></fa>
  <fa name="bullseye" stack="1"></fa>
</fa-stack>

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

Fork me on GitHub