ember-cli-font-awesome

An ember-cli addon for using Font Awesome icons in Ember applications.

Install

In your application's directory:

$ ember install ember-cli-font-awesome

If you have manually installed or updated the addon via NPM then you should also run:

$ ember generate ember-cli-font-awesome

Ember Compatibility

Version >= 1.0.0 of this addon is compatible with Ember >= 1.11.X and requires Ember CLI >= 1.13.X. Version >= 0.1.0 < 1.0.0 of this addon is compatible with Ember >= 1.13.X and requires Ember CLI >= 1.13.X

If you need compatibility with Ember < 1.11.X then you should try version 0.0.9

Customize with sass/scss

You can opt-in to the scss version of font-awesome. You can do this by adding the following configuration in ember-cli-build.js:

var app = new EmberApp({
  emberCliFontAwesome: {
    useScss: true
  }
});

Then in your app.scss:

@import "bower_components/font-awesome/scss/font-awesome";

Basic usage

In your Handlebars templates:

{{fa-icon icon="camera"}}

This will render:

<i class="fa fa-camera"></i>

If you prefer, you can use the fa- prefix in the icon name.

{{fa-icon icon="fa-camera"}}
{{fa-icon icon="camera"}}

Complete list of Font Awesome icons

Options

The Font Awesome examples illustrate the various options and their effects. It should be obvious how these options map to their fa-icon counterparts.

Different icon sizes

{{fa-icon icon="star" size="lg"}}
{{fa-icon icon="star" size=2}}
{{fa-icon icon="star" size=3}}
{{fa-icon icon="star" size=4}}
{{fa-icon icon="star" size=5}}

Rotate

{{fa-icon icon="camera" rotate=90}}
{{fa-icon icon="camera" rotate=180}}
{{fa-icon icon="camera" rotate=270}}

Flip

{{fa-icon icon="bicycle" flip="horizontal"}}
{{fa-icon icon="car" flip="vertical"}}

Spin

{{fa-icon icon="refresh" spin=true}}

Pulse

{{fa-icon icon="spinner" pulse=true}}

Inverse

{{fa-icon icon="circle" inverse=true}}

List icons

{{fa-icon icon="star" listItem=true}}

In combination with the {{fa-list}} and {{fa-list-icon}} components:

{{#fa-list}}
  <li>{{fa-list-icon icon="star"}}Item 1</li>
  <li>{{fa-list-icon icon="star"}}Item 2</li>
{{/fa-list}}

Fixed width icons

<div class="list-group">
  <a class="list-group-item" href="#">
    {{fa-icon icon="home" fixedWidth=true}} Home
  </a>
  <a class="list-group-item" href="#">
    {{fa-icon icon="book" fixedWidth=true}} Library
  </a>
</div>

Bordered & pulled icons

<p>
{{fa-icon icon="quote-left" pull="left" border=true}}
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
</p>

Stacked icons

{{#fa-stack size="lg"}}
  {{fa-icon icon="fa-square-o" stack=2}}
  {{fa-icon icon="fa-twitter" stack=1}}
{{/fa-stack}}

aria-hidden attribute

To better support accessibility (i.e. screen readers), the helper now generates an aria-hidden attribute by default:

{{fa-icon icon="star"}}
{{!-- results in: --}}
<i class="fa fa-star" aria-hidden="true"></i>

To remove the aria-hidden attribute:

{{fa-icon icon="star" ariaHidden=false}}
{{!-- results in: --}}
<i class="fa fa-star"></i>

Actions

You can respond to actions on the icon by passing on action handlers:

{{fa-icon icon="star" click=(action "myClickHandler")}}

Tag name

Use tagName to control the generated markup:

{{fa-icon icon="star" tagName="span"}}
{{!-- results in: --}}
<span class="fa fa-star"></span>

Custom class names

{{fa-icon icon="bicycle" class="my-custom-class"}}
{{!-- results in: --}}
<i class="fa fa-bicycle my-custom-class"></i>

Title attribute

{{fa-icon icon="edit" title="Edit the item"}}
{{!-- results in: --}}
<i class="fa fa-edit" title="Edit the item"></i>

License

Public Domain