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

WARNING: Please verify that you are reading the README corresponding with the version of ember-font-awesome you are using.

• Ember Version Compatibility
• Installing the Add-on
• Using the Add-on
• Customize with Sass/Scss or Less
• Excluding assets

Please consult the table to check which version of ember-font-awesome you should use:

In your application's directory:

$ ember install ember-font-awesome

Use the component in your Handlebars templates:

{{fa-icon "camera"}}

This will render:

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

To see which icons are available please check the complete list of Font Awesome icons

The Font Awesome examples illustrate the various options and their effects. It should be fairly simple to map these options to their {{fa-icon}} counterparts.

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

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

{{#fa-list as |l|}}
  <li>{{l.fa-icon "check-square"}}List icons</li>
  <li>{{l.fa-icon "check-square"}}can be used</li>
  <li>{{l.fa-icon "spinner" spin=true}}as bullets</li>
  <li>{{l.fa-icon "square"}}in lists</li>
{{/fa-list}}

<p>
{{fa-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>

{{fa-icon "spinner" spin=true}}
{{fa-icon "circle-o-notch" spin=true}}
{{fa-icon "refresh" spin=true}}
{{fa-icon "cog" spin=true}}
{{fa-icon "spinner" pulse=true}}

{{fa-icon "shield"}} normal
{{fa-icon "shield" rotate=90}} rotated 90 degrees
{{fa-icon "shield" rotate=180}} rotated 180 degrees
{{fa-icon "shield" rotate=270}} rotated 270 degrees
{{fa-icon "shield" flip="horizontal"}} flipped horizontal
{{fa-icon "shield" flip="vertical"}} flipped vertical

{{#fa-stack size="lg" as |s|}}
  {{s.stack-2x "square-o"}}
  {{s.stack-1x "twitter"}}
{{/fa-stack}}

{{#fa-stack size="lg" as |s|}}
  {{s.stack-2x "circle"}}
  {{s.stack-1x "flag" inverse=true}}
{{/fa-stack}}

{{#fa-stack size="lg" as |s|}}
  {{s.stack-2x "square"}}
  {{s.stack-1x "terminal" inverse=true}}
{{/fa-stack}}

{{#fa-stack size="lg" as |s|}}
  {{s.stack-2x "square"}}
  {{s.stack-1x "terminal" class="text-danger"}}
{{/fa-stack}}

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

{{fa-icon "star"}}

Results in:

<i class="fa fa-star" aria-hidden="true"></i>

To remove the aria-hidden attribute:

{{fa-icon "star" ariaHidden=false}}

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

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

Use tagName to control the generated markup:

{{fa-icon "star" tagName="span"}}

Results in:

<span class="fa fa-star"></span>

{{fa-icon "bicycle" class="my-custom-class"}}

Results in:

<i class="fa fa-bicycle my-custom-class"></i>

{{fa-icon "edit" title="Edit the item"}}

Results in:

<i class="fa fa-edit" title="Edit the item"></i>

If you are using the ember-cli-sass or ember-cli-less addon, you can opt-in to the Scss or Less version of font-awesome by adding the following configuration in ember-cli-build.js:

var app = new EmberApp({
  'ember-font-awesome': {
    useScss: true, // for ember-cli-sass
    useLess: true  // for ember-cli-less
  }
});

Then in your app.scss or app.less:

@import "font-awesome";

You can configure the addon to not import any assets (CSS or font files) by adding the following configuration in ember-cli-build.js:

var app = new EmberApp({
  'ember-font-awesome': {
    includeFontAwesomeAssets: false
  }
});

In addition, you can configure the addon to just exclude the font file assets by adding the following configuration in ember-cli-build.js:

var app = new EmberApp({
  'ember-font-awesome': {
    includeFontFiles: false
  }
});

You can change the directory where the fonts are copied to using the following configuration:

var app = new EmberApp({
  'ember-font-awesome': {
    fontsOutput: "/some/dir/"
  }
});

This is useful when you change the output paths for your ember app. By default, ember-font-awesome copies the font files to /dist/fonts. The addon produces a css file to load the fonts that will be included in the vendor css file and expect to find the fonts at ../fonts. If the css directory is not at the same level as the fonts directory, the site won't load the fonts.

For example, moving the css directory to /dist/assets/css would require the fonts directory to be /dist/assets/fonts and the configuration would look like this:

var app = new EmberApp({
    outputPaths: {
        app: {
            css: {
                  app: "/assets/css/app-name.css",
            },
            js: "/assets/js/app-name.js",
        },

        vendor: {
            css: "/assets/css/vendor.css",
            js: "/assets/js/vendor.js",
        },
    },
    'ember-font-awesome': {
        fontsOutput: "/assets/fonts"
    }
});

Public Domain