@fortawesome/ember-fontawesome
Advanced tools
Official Ember component for Font Awesome 5
If you are using an older version of Ember, see our 1.x branch.
Font Awesome 5 Ember component using SVG with JS
Hey there! We're glad you're here...
If you've used Font Awesome in the past (version 5 or older) there are some things that you should learn before you dive in.
This package is for integrating with Ember.js. If you aren't using Ember then it's not going to help you. Head over to our "Get Started" page for some guidance.
This package, under the hood, uses SVG with JS and the @fortawesome/fontawesome-svg-core library. This implementation differs drastically from
the web fonts implementation that was used in version 4 and older of Font Awesome. You might head over there to learn about how it works.
See UPGRADING.md.
You might also be interested in the larger umbrella project UPGRADING.md
This project is an Ember addon. So we'll add that first:
$ ember install @fortawesome/ember-fontawesome
We need at least one style. Let's start with the free version of Solid.
$ npm i --save-dev @fortawesome/free-solid-svg-icons
or with Yarn
$ yarn add --dev @fortawesome/free-solid-svg-icons
Brands are separated into their own style and for customers upgrading from version 4 to 5 we have a limited number of Regular icons available.
Visit fontawesome.com/icons to search for free and Pro icons
$ npm i --save-dev @fortawesome/free-brands-svg-icons
$ npm i --save-dev @fortawesome/free-regular-svg-icons
Do this for each icon pack you'll use in your app. By default, all installed
icon packs will be bundled into vendor.js and also added to the Font Awesome
library (i.e. library.add())
If you are a Font Awesome Pro subscriber you can install Pro packages.
$ npm i --save-dev @fortawesome/pro-solid-svg-icons
$ npm i --save-dev @fortawesome/pro-regular-svg-icons
$ npm i --save-dev @fortawesome/pro-light-svg-icons
$ npm i --save-dev @fortawesome/pro-duotone-svg-icons
Using the Pro packages requires additional configuration.
If you want to include only a subset of icons from an icon pack, add a
config/icons.js file listing the icons you want to include.
The following example declares that all icons in
free-solid-svg-icons should be included build,
and, only adjust, ambulance, and pencil-alt from pro-light-svg-icons
are to be included.
module.exports = function() {
return {
'free-solid-svg-icons': 'all',
'pro-light-svg-icons': [
'adjust',
'ambulance',
'pencil-alt'
]
};
};
By default, ember-fontawesome will warn if no icons are being included
in the build. To disable this behavior (e.g. if icons are being added by
some other means), set warnIfNoIconsIncluded to false.
let ENV = {
fontawesome: {
warnIfNoIconsIncluded: false,
// ...
}
};
If you want to use icons in your addon there are a few steps to take.
First ensure @fortawesome/ember-fontawesome and any icon packs are in
the dependencies section of your package.json. This makes them available
to the apps that use your addon.
Second you need to declare what icons you are using so apps that subset icons
will know what to include. You do this in config/icons.js. The format is:
module.exports = function() {
return {
'free-solid-svg-icons': ['bacon', 'pencil'],
'free-brands-svg-icons': ['font-awesome-flag'],
};
};
You should avoid listing any Font Awesome Pro packages as dependencies unless you are confident that whoever is using your addon has access to those.
Out of the box, icons will use the Solid style unless a prefix is manually specified.
To change the default to Regular or Light, add a fontawesome configuration object
to your application's environment.js and set the defaultPrefix option.
module.exports = function(environment) {
let ENV = {
// Add options here
fontawesome: {
defaultPrefix: 'fal' // light icons
}
};
// ...
return ENV;
};
As a reminder, the free version of Font Awesome does not include a complete set of icons for any style other than Solid, so this setting is recommended only for Pro subscribers.
This is what it would look like in your template:
<FaIcon @icon="coffee" />
Without a prefix specified, the default specified in environment.js (or fas, if none set) is assumed:
<FaIcon @icon="square" />
If you want to use an icon from any style other than the default, use prefix=.
<FaIcon @icon="square" @prefix="far" />
The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.
Size:
<FaIcon @icon="coffee" @size="4x" />
<FaIcon @icon="coffee" @fixedWidth={{true}} />
<FaIcon @icon="coffee" @rotation={{90}} />
<FaIcon @icon="coffee" @rotation={{180}} />
<FaIcon @icon="coffee" @rotation={{270}} />
Flip horizontally, vertically, or both:
<FaIcon @icon="coffee" @flip="horizontal" />
<FaIcon @icon="coffee" @flip="vertical" />
<FaIcon @icon="coffee" @flip="both" />
Spin and pulse animation:
<FaIcon @icon="coffee" @spin={{true}} />
<FaIcon @icon="coffee" @border={{true}} />
<FaIcon @icon="coffee" @pull="left" />
<FaIcon @icon="coffee" @pull="right" />
<FaIcon @icon="coffee" @transform="shrink-6 rotate-30" />
<FaIcon @icon="coffee" @transform="shrink-6" @mask="circle" />
<FaIcon @icon="coffee" @symbol={{true}} />
<span class="fa-layers fa-lg">
<FaIcon @icon="circle" />
<FaIcon @icon="check" class="fa-inverse" @transform="shrink-6" />
</span>
<span class="fa-layers fa-lg">
<FaIcon @icon="circle" />
<span class="fa-layers-text">8</span>
</span>
Review the following docs before diving in:
And then:
The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. We'd like to take a moment to recognize them.
| Name | GitHub |
|---|---|
| Ilya Radchenko | @knownasilya |
| Jonathan Johnson | @jrjohnson |
| ember-tomster | @ember-tomster |
| Julien Guimont | @juggy |
| Xaser Acheron | @XaserAcheron |
| samcic | @samcic |
| Josemar Luedke | @josemarluedke |
| Robert Clancy | @robclancy |
| maxwondercorn | @maxwondercorn |
| Denis Toledo | @dnstld |
| mkszepp | @mkszepp |
| davideferre | @davideferre |
| st-h | @st-h |
| stopfstedt | @st-h |
| Michael Rykov | @rykov |
| Chris Manson | @mansona |
| François de Metz | @francois2metz |
| NullVoxPopuli | @NullVoxPopuli |
| Font Awesome Team | @FortAwesome |
If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
See DEVELOPMENT.md
See the Contributing guide for details.
This project is licensed under the MIT License.
FAQs
Official Ember component for Font Awesome 5
We found that @fortawesome/ember-fontawesome demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.