An ember-cli addon for using Font Awesome icons in Ember applications.
This addon:
- Registers a Handlebars helper for rendering Font Awesome icon markup.
- Imports FontAwesome CSS and fonts into your app. (This can be disabled if necessary, see below.)
For the sake of clarity: this is an ember-cli addon, not a standalone module.
# In your application's directory:
npm install --save-dev ember-cli-font-awesome
This addon works with ember-cli v0.0.43 and later.
In your Handlebars templates:
{{fa-icon "camera"}}
If you prefer, you can use the fa- prefix in the icon name.
{{!-- Equivalent --}}
{{fa-icon "fa-camera"}}
{{fa-icon "camera"}}
Complete list of Font Awesome icons
You can also bind the icon name to a controller or model property:
{{fa-icon iconName}}
{{fa-icon menu.copyIcon}}
if you know upfront that the icon will not change, you can use unbound to prevent a property binding from being created:
{{!-- Static icon --}}
{{unbound fa-icon "camera"}}
{{!-- Icon initialized with, but not bound to, a property}}
{{unbound fa-icon iconName}}
The Font Awesome examples illustrate the various options and their effects. It should be obvious how these options map 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}}
The old icon size syntax is deprecated, but still supported, as of v0.0.4.
{{fa-icon "camera" rotate=90}}
{{fa-icon "camera" rotate=180}}
{{fa-icon "camera" rotate=270}}
{{fa-icon "bicycle" flip="horizontal"}}
{{fa-icon "car" flip="vertical"}}
{{!-- using a boolean literal --}}
{{fa-icon "refresh" spin=true}}
{{!-- or a property --}}
{{fa-icon "refresh" spin=isLoading}}
<ul class="fa-ul">
<li>
{{fa-icon "star" listItem=true}} Item
</li>
</ul>
<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>
<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 "bicycle" classNames="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>
Pass this option to the EmberApp constructor in your application's Brocfile.js:
var app = new EmberApp({
emberCliFontAwesome: { includeFontAwesomeAssets: false }
});
The CSS and font files will then not be included in your app. Managing the Font Awesome assets yourself is what I would recommend doing for production apps. See the note below on how to do this with Bower. This addon includes the Font Awesome assets by default mainly for a better out-of-the-box experience.
This should be straightforward for anyone familiar with ember-cli's handling of front-end dependencies through Bower.
# From your application's directory
bower install --save font-awesome
Then in your Brocfile.js:
/*
This example is more verbose than necessary for the sake of illustration.
You could, for example, include the Font Awesome assets as a Broccoli tree.
*/
app.import("bower_components/font-awesome/css/font-awesome.css");
app.import("bower_components/font-awesome/fonts/fontawesome-webfont.eot", { destDir: "fonts" });
app.import("bower_components/font-awesome/fonts/fontawesome-webfont.svg", { destDir: "fonts" });
app.import("bower_components/font-awesome/fonts/fontawesome-webfont.ttf", { destDir: "fonts" });
app.import("bower_components/font-awesome/fonts/fontawesome-webfont.woff", { destDir: "fonts" });
app.import("bower_components/font-awesome/fonts/FontAwesome.otf", { destDir: "fonts" });
Public Domain