Skip to content
Font Awesome 5 Ember component using SVG with JS
JavaScript HTML
Branch: master
Clone or download
Latest commit c5bfe2f Jul 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Updating issue templates May 17, 2019
addon use explicit local reference in fa-icon template Mar 15, 2019
app Remove old export Sep 13, 2018
blueprints/ember-fontawesome Improve build, load, install and package publication (#2) Feb 15, 2018
config Update to Ember 3.11 Jul 16, 2019
lib fixes #95 build issue when an addon doesn't have a root Feb 21, 2019
tests fixed conflicts Jul 18, 2019
vendor Specify icon names without the fa prefix (#43) May 14, 2018
.editorconfig Initial Commit from Ember CLI v2.17.0 Dec 10, 2017
.ember-cli Initial Commit from Ember CLI v2.17.0 Dec 10, 2017
.eslintignore Update to ember-cli 3.7.1 Feb 3, 2019
.eslintrc.js Update to Ember 3.11 Jul 16, 2019
.gitignore Update to ember-cli 3.10 Jun 27, 2019
.npmignore Update to ember-cli 3.7.1 Feb 3, 2019
.template-lintrc.js Update ember-cli to v3.4.3 Nov 30, 2018
.travis.yml Update to Ember 3.11 Jul 16, 2019
.watchmanconfig Initial Commit from Ember CLI v2.17.0 Dec 10, 2017
CHANGELOG.md Release 0.1.14 Jun 28, 2019
CODE_OF_CONDUCT.md Community docs (#66) Aug 6, 2018
CONTRIBUTING.md references to Angular -> Ember Jul 18, 2019
DEVELOPMENT.md Release 0.1.3 Aug 10, 2018
LICENSE.md Update to ember-cli 3.7.1 Feb 3, 2019
README.md fixed conflicts Jul 18, 2019
UPGRADING.md protection as suggested by jrjohnson Feb 6, 2019
ember-cli-build.js Consolidate Configuration (#68) Aug 21, 2018
index.js rename nodeModulesPath to prevent conflict with ember-cli internals (#… Apr 17, 2019
package.json Update to Ember 3.11 Jul 16, 2019
testem.js Update ember-cli to v3.2.0 (#58) Jul 16, 2018
yarn.lock Release 0.1.14 Jun 28, 2019

README.md

Official Javascript Component

ember-fontawesome

npm

Compatibility

  • Ember.js v3.4 or above
  • Ember CLI v2.13 or above
  • Node.js v8 or above

Font Awesome 5 Ember component using SVG with JS

Introduction

Hey there! We're glad you're here...

Upgrading Font Awesome?

If you've used Font Awesome in the past (version 4 or older) there are some things that you should learn before you dive in.

https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Get started

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.

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started

Learn about our new SVG implementation

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.

https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core

Going from 0.0.x to 0.1.0

See UPGRADING.md.

You might also be interested in the larger umbrella project UPGRADING.md

Installation

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

Add more styles or Pro 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

Duotone icons are currently in pre-release and are coming soon to this component.

Using the Pro packages requires additional configuration.

Subsetting icons

If you want to include only a subset of icons from an icon pack, add a fontawesome configuration object to your applications options in environment.js. The following example declares that all icons in free-solid-svg-icons should be included in the vendor.js bundle and added to the library, and for pro-light-svg-icons, only adjust, ambulance, and pencil-alt are to be included in the bundle and added to the library.

module.exports = function(environment) {
  let ENV = {
    // Add options here
    fontawesome: {
      icons: {
        'free-solid-svg-icons': 'all',
        'pro-light-svg-icons': [
          'adjust',
          'ambulance',
          'pencil-alt'
        ]
      }
    }
  };
  // ...
  return ENV;
};

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,
    // ...
  }
};

Using within an addon

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.

Usage

Configuration

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.

Template

This is what it would look like in your template:

<FaIcon @icon="coffee" />

All examples use angle bracket invocation available in Ember 3.4+. Using Ember's classic component invocation the example above would be:

{{fa-icon "coffee"}}

For details see Angle Bracket Syntax in the Ember documentation.

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" />

Features

The following features are available as part of Font Awesome. Note that the syntax is different from our general web-use documentation.

Basic

Size:

<FaIcon @icon="coffee" @size="4x" />

Fixed width:

<FaIcon @icon="coffee" @fixedWidth={{true}} />

Rotate:

<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}} />

Border:

<FaIcon @icon="coffee" @border={{true}} />

Pull left or right:

<FaIcon @icon="coffee" @pull="left" />
<FaIcon @icon="coffee" @pull="right" />

Advanced

Power Transforms:

<FaIcon @icon="coffee" @transform="shrink-6 rotate-30" />

Masking:

<FaIcon @icon="coffee" @transform="shrink-6"  @mask="circle" />

Symbols:

<FaIcon @icon="coffee" @symbol={{true}} />

Layers:

<span class="fa-layers fa-lg">
  <FaIcon @icon="circle" />
  <FaIcon @icon="check" class="fa-inverse" @transform="shrink-6" />
</span>

Layers text:

<span class="fa-layers fa-lg">
  <FaIcon @icon="circle" />
  <span class="fa-layers-text">8</span>
</span>

How to Help

Review the following docs before diving in:

And then:

  1. Check the existing issue and see if you can help!

Contributors

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

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

The Font Awesome team:

Name GitHub
Travis Chase @supercodepoet
Rob Madole @robmadole
Mike Wilkerson @mlwilkerson
Brian Talbot @talbs

Releasing this project (only project owners can do this)

See DEVELOPMENT.md

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.