angular-fontawesome

angular-fontawesome

A simple directive for FontAwesome 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. Include the module in your own app.

angular.module('myApp', ['picardy.fontawesome'])

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

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

Attributes

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

<fa name="ICON-NAME"
    size="1-5|large"
    flip="horizontal|vertical"
    rotate="90|180|270"
    spin
    border
    list
></fa>

name

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

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

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="fa fa-square fa-3x"></i>

flip

Flip the icon horizontal or vertical.

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

rotate

Rotate the icon 90, 180, or 270 degrees.

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

spin

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

<fa name="loading" spin></fa>
<!-- rendered -->
<i class="fa fa-loading 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 ? 'loading' : 'check' }}" spin="{{ isLoading }}"></fa>
<!-- rendered -->
<i class="fa fa-loading fa-spin"></i>

border

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

fixed width

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

inverse

<fa name="home" inverse></fa>
<!-- rendered -->
<i class="fa 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="fa 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="fa fa-check"></i>
  </li>
</ul>

stack

coming soon

TODO

• fa-stack support
• pull="left", pull="right"
• demos on Github pages

License

MIT Licensed by Picardy.