granite-font-awesome
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
https://lostinbrittany.github.io/granite-font-awesome
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": [
"manifest.json",
"bower_components/font-awesome/fonts/*",
"bower_components/webcomponentsjs/*.js"
],
A complete example
<!-- import the module -->
<link rel="import" href="../granite-font-awesome/granite-font-awesome.html">
<dom-module id="x-foo">
<template>
<!-- include the style module by name -->
<style include="granite-font-awesome"></style>
<style>:host { display: block; }</style>
Hi
</template>
<script>Polymer({is: 'x-foo'});</script>
</dom-module>
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 [email protected]
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.
└─ [email protected]
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
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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