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:
Addon version | Ember version | Addon name |
---|---|---|
>= 2.0.0 , < 3.0.0 |
>= 2.3.0 |
ember-font-awesome |
>= 1.0.0 , < 2.0.0 |
>= 1.11.0 |
ember-cli-font-awesome |
>= 0.1.0 , < 1.0.0 |
>= 1.13.0 |
ember-cli-font-awesome |
0.0.9 |
< 1.11.0 |
ember-cli-font-awesome |
In your application's directory:
$ ember install ember-font-awesome
If you have manually installed or updated the addon via NPM then you should also run:
$ ember generate ember-font-awesome
Use the component in your Handlebars templates:
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.
The aria-hidden
Attribute
To better support accessibility (i.e. screen readers), the helper adds the
aria-hidden
attribute by default:
Results in:
<i class="fa fa-star" aria-hidden="true"></i>
To remove the aria-hidden
attribute:
You can respond to actions on the icon by passing on action handlers:
Use tagName
to control the generated markup:
Results in:
<span class="fa fa-star"></span>
Results in:
<i class="fa fa-bicycle my-custom-class"></i>
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
}
});