angular-fontawesome

A simple Angular directive for FontAwesome

Angular Core Dependency: ^1.2

Module License: MIT

Added by: Sam Deering

GitHub

Repository

picardy/angular-fontawesome

Stats

Stars: 76

Watchers: 76

Forks: 7

Author

Picardy
Picardy

Module Description

angular-fontawesome Build Status

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

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

Module stats last updated: 2017-03-19 16:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!