gluon-font-awesome

A lightweight Web Component wrapper for Font Awesome

---

• Supports Free and Pro icon sets
• Uses the Font Awesome CDN
• Supports self-hosted font-awesome assets

Examples

Basic usage

<script type="module" src="/node_modules/@gluon/font-awesome/font-awesome.js"></script>

<font-awesome icon="fas fa-camera-retro fa-7x"></font-awesome>

In other Web Components

import '/node_modules/@gluon/font-awesome/font-awesome.js';

class MyElement extends HTMLElement {
  get template() {
    return html`<p>Take a picture! <font-awesome icon="fas fa-camera-retro"></font-awesome></p>`;
  }
  // ...
}

Using font-awesome Pro

<script>window.FontAwesome = { pro: true };</script>
<script type="module" src="/node_modules/@gluon/font-awesome/font-awesome.js"></script>

<font-awesome icon="fal fa-camera-retro fa-7x"></font-awesome>

Using self-hosted assets

npm install @fortawesome/fontawesome-free

<script>window.FontAwesome = { path: '/node_modules/@fortawesome/fontawesome-free' };</script>
<script type="module" src="/node_modules/@gluon/font-awesome/font-awesome.js"></script>

<font-awesome icon="fal fa-camera-retro fa-7x"></font-awesome>

Installation

Gluon-font-awesome is available from npm as @gluon/font-awesome

npm install @gluon/font-awesome

Compatibility

Works on all modern browsers, and IE11. May require some polyfills and/or bundling. See rollup.config.js and index.html for example bundling and polyfill usage.

License

MIT

Copyright © 2017-present, Goffert van Gool