Wondering what’s next for npm?Check out our public roadmap! »

    angular-fontawesome

    1.0.0 • Public • Published

    angular-fontawesome Build Status

    Join the chat at https://gitter.im/picardy/angular-fontawesome

    http://picardy.github.io/angular-fontawesome/demo/

    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="spinner" spin ng-style="{'color': checkColor}"></fa>
      <!-- $scope.checkColor = 'blue' -->
      <!-- rendered -->
      <i class="fa 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"
        spin
        border
        list
    ></fa>
    name

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

    <fa name="github"></fa>
    <!-- rendered -->
    <i class="fa 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="fa 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(0000);
        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="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="spinner" spin></fa>
    <!-- rendered -->
    <i class="fa 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="fa fa-spinner 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

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

    Install

    npm i angular-fontawesome

    DownloadsWeekly Downloads

    1,247

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar