ember-cli-font-awesome-sass
v1.0.4
Published
This addon installs font-awesome fonts files and sets you up to compile the font-awesome sass into your app. Understand that this addon is for Ember applications that are compiling their styles using SASS. If your Ember application is using pure CSS or
Downloads
11
Maintainers
Readme
ember-cli-font-awesome-sass
This addon installs font-awesome fonts files and sets you up to compile the font-awesome sass into your app. Understand that this addon is for Ember applications that are compiling their styles using SASS.
If your Ember application is using pure CSS or LESS, than this addon is NOT for you.
What Does This Addon Do?
This addon will make sure that the latest version of the
ember-cli-sass
Ember Addon is
installed in your Ember-App. In addition, the latest version of the
font-awesome
library
from bower will be downloaded in order to acquire the fonts and
SASS source. The relevant font files are copied to your Ember-App's
assets
directory and are then referred to from the stylesheet.
Requirements
- Ember >= 1.13.0
- Ember CLI
Installation
Installation is basically two simple steps: one install the addon and two
import the SASS source into your app.scss
file.
The following will install this addon along with the font-awesome source and fonts:
$ ember install ember-cli-font-awesome-sass
Next, inside your app/styles/app.scss
file you must compile the font-awesome
source into your application's stylesheet:
// `app/styles/app.scss`
...
@import "ember-cli-font-awesome-sass";
...
Alternate Font Path?
By default, this addon takes care of the font paths for you.
If for some reason you need to customize this path, you can do so
by supplying the $fa-font-path
variable value before you import
ember-cli-font-awesome-sass
. Make sure the path you specify includes
the trailing slash!
// `app/styles/app.scss`
...
$fa-font-path: '/some/absolute/path'
@import 'ember-cli-font-awesome-sass';
...
Upgrading
When working through the Ember upgrade process, I recommend
invoking the ember install ember-cli-font-awesome-sass
command once
you are done to get the latest version of the addon. Notice that this
will likely update the font-awesome
bower dependency to the latest
4.x.x version.
Troubleshooting And Tips
- You need
ember-cli-sass
to be configured in your application. This means that by default your styles have been compiled inside yourapp/styles/app.scss
file. If you've adjusted the configuration to use a different file, then you must add the@import 'ember-cli-font-awesome-sass'
directive there. - As font-awesome version updates are made available, simply reinstall your
bower packages and in some cases update your
bower.json
to ensure the version you want is being brought into your application.
Ember Addon Building And Testing
Setup
git clone [email protected]:cybertoothca/ember-cli-font-awesome-sass.git
npm install
bower install
Running The Dummy Application
ember server
- Visit your app at http://localhost:4200.
Running Addon Tests
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
Building The Addon
ember build
For more information on using ember-cli, visit http://ember-cli.com/.
Linking This Addon For Local Testing
Linking
- From the command line at the root of this project run the
npm link
command to link this addon within your local node repository. - From the other Ember project that you wish to test this addon
in, execute the following command:
npm link ember-cli-font-awesome-sass
. - Now in that same other Ember project, you should go into the
package.json
and add the ember addon with the version *. It will look something like this:"ember-cli-font-awesome-sass": "*"
. Now when/if you executenpm install
on this other project it will know to look for the linked addon rather than fetch it from the central repository.
Unlinking
- Remove the addon from your local node repository with the following
command (that can be run anywhere):
npm uninstall -g ember-cli-font-awesome-sass
- Remove the reference to the
ember-cli-font-awesome-sass
in your other project'spackage.json
. - Run an
npm prune
from the root of your other project's command line.