Directory

slate-font-awesome - Vaadin Add-on Directory

Wrapping of *Font Awesome* as Polymer web componentto be used as shared style in full ShadowDOM mode slate-font-awesome - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/JeffLeFoll/slate-font-awesome](https://github.com//JeffLeFoll/slate-font-awesome/blob/4.7.3/README.md) on 2019-05-10 ]** # slate-font-awesome [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/JeffLeFoll/slate-font-awesome) Wrapping of *[Font Awesome](http://fontawesome.io)* as [Polymer](https://www.polymer-project.org) web componentto be used as [shared style](https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules) in full ShadowDOM mode (i.e. inside `` tags). ### Using *slate-font-awesome* modules Using polymer [shared styles](https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules) modules is a two-step process: 1) you need to use a `` tag to import the module, 2) add a ` ``` For Chrome only (at least up to 59), if you want to use *slate-font-awesome* in sub-component, you may need to add also the *slate-font-awesome* module in your index.html `` tag: ```html ``` If you build you application with Polymer-cli build task you may also need to edit the *polymer.json* and add the following extra-dependencies: ``` "bower_components/slate-font-awesome/fonts/*.*" ``` ## Demo ! [https://jefflefoll.github.io/slate-font-awesome](https://jefflefoll.github.io/slate-font-awesome) ```html ``` ## Generating the elements Using NodeJS and the `slate-font-awesome-generator.js` to transform Font Awesome CSS files into polymer elements. You need to do a `npm install` to recover the rependencies and then `node tools/slate-font-awesome-generator.js` to execute the script. ``` $ node tools/slate-font-awesome-generator.js ``` After executing it, a series of HTML files is generated in the folder, each one corresponding to a Font Awesome CSS file: slate-font-awesome.html, slate-font-awesome-min.html ## Contributing 1. Fork it! 2. Create your feature branch: `git checkout -b my-new-feature` 3. Commit your changes: `git commit -am '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 ## Credits This work is inspired by the one of @LostInBrittany with [granite-bootstrap](https://github.com/LostInBrittany/granite-bootstrap). ## License [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0)