← Back


A wrapping of Font Awesome CSS as Polymer shared style modules




[ This description is mirrored from at on 2019-05-22 ]

Published on


granite-font-awesome is a wrapping of Font Awesome CSS as Polymer shared styles modules (i.e. inside <dom-module> tags).

Hybrid Polymer element, 1.x-2.x ready

Doc & demo

Using granite-font-awesome modules

Using polymer shared styles modules is a two-step process: you need to use a <link> tag to import the module, and a <style> tag to include the styles in the correct place.

To use granite-font-awesome in an element:

1. Add the dependency

Add the dependency to the bower.json of your application:

   "dependencies": {
     "granite-font-awesome": "LostInBrittany/granite-font-awesome#^4.7.0"

And then recover them via bower install.

2. Import the granite-font-awesome module you want to use

Usually you will simply want to import granite-font-awesome.html (wrap around font-awesome.css) or granite-font-awesome-min.html (wrap around font-awesome.min.css).

Supossing you're using the standard folder locations for your components:

<link rel="import" href="../granite-font-awesome/elements/granite-font-awesome.html">

3. Inside your component, use granite-font-awesome as shared style

In your element's template you add the include for the granite-font-awesome module:

<style include="granite-font-awesome"></style>

4. Add the fonts to polymer.json

If you're building your app using polymer-cli, don't forget to add the fonts folder granite-font-awesome/fonts/ to the extraDependencies section of your polymer.json file.

  "extraDependencies": [

A complete example

<!-- import the module  -->
<link rel="import" href="../granite-font-awesome/granite-font-awesome.html">
<dom-module id="x-foo">
    <!-- include the style module by name -->
    <style include="granite-font-awesome"></style>
    <style>:host { display: block; }</style>
  <script>Polymer({is: 'x-foo'});</script>

Generating the style modules

To generate the style modules we use the granite-css-modularizer node script:

1. Clone the repository and recover the dependencies of granite-css-modularizer

Clone the granite-css-modularizer repository and recover the dependencies using yarn (or npm) :

$ yarn install
yarn install v1.2.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.83s.

2. Recover Font Awesome

Recover Font Awesome distribution using yarn (or npm):

$ yarn add font-awesome@4.7.0
yarn add v1.2.1
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ font-awesome@4.7.0
warning No license field
Done in 1.34s.

Currently granite-font-awesome uses Font Awesome version 4.7.0, if you need another version you can change simply install it.

3. Generate the components

Using NodeJS and the granite-css-modularizer.js to transform Font Awesome CSS files into polymer elements.

$ node ../granite-css-modularizer.js ./node_modules/font-awesome/css ./css_modules/granite-font-awesome/elements

After executing it, a series of HTML files is generated in the ./css_modules/granite-font-awesome/elements folder, each one corresponding to a Font Awesome CSS file.

$ ls ./css_modules/granite-font-awesome/elements/*.html
granite-font-awesome.html  granite-font-awesome-min.html

4. Add the fonts

As Font Awesome CSS looks for the fonts files folder (as ../fonts/), copy the content of ./node_modules/font-awesomev/fonts into ./css_modules/granite-font-awesome/fonts/.

$ cp -r  ./node_modules/font-awesome/fonts/* ./css_modules/granite-font-awesome


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Note on semver versioning

I'm aligning the versions of this element with Font Awesome version, in order to make easier to choose the right version


Apache 2.0


(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.



  • polymer#Polymer/polymer#1.9 - 2
Apache License 2.0


Polymer 2.0+
Browser Independent