8

I can't get the Font Awesome icons to work with LitElement, because CSS styles don't pierce the shadow boundaries of custom elements.

Is it possible to use Font Awesome or other icons with LitElement?

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
grohjy
  • 2,059
  • 1
  • 18
  • 19

6 Answers6

7

There is material icons in Polymer material library and the solutions used there helped me to solve the font awesome problem.

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script type="module" src="./src/components/fa-icon.js"></script>
  <title>Font Awesome test</title>
</head>
<body>
  <h1>Hello world! <fa-icon iclass="far fa-thumbs-up"></fa-icon>
</body>
</html>

fa-icon.js:

import { LitElement, html } from '@polymer/lit-element';
import { FaStyles } from './css/fontawesome-all.css.js';

export class FaIcon extends LitElement {
  static get properties() {
    return {
      iclass: String
    }
  }
  constructor() {
    super();
    this.iclass="";
    const fontEl = document.createElement('link');
    fontEl.rel = 'stylesheet';
    fontEl.href = 'https://use.fontawesome.com/releases/v5.0.13/css/all.css';
    document.head.appendChild(fontEl);
  }
  _render({ iclass }) {
    return html`${FaStyles}<i class$="${iclass}"></i>`;
  }
}
customElements.define('fa-icon', FaIcon);

And then you need to customize font awesome css-file. Download the css and rename it with ".js". Modify the file.

css/fontawesome-all.css.js:

import { LitElement, html } from '@polymer/lit-element';

export const FaStyles = html`
<style>

... the file's original content here ...

  </style>
`;

And then you must replace all \ with \\. Example:

.fa-yahoo:before {
  content: "\f19e"; }

after replacement:

.fa-yahoo:before {
  content: "\\f19e"; }
shA.t
  • 16,580
  • 5
  • 54
  • 111
grohjy
  • 2,059
  • 1
  • 18
  • 19
2

try https://www.npmjs.com/package/fa-icons , this module is based in LitElement

quinszouls
  • 21
  • 1
1

if someone is still having this issue this is very helpful

https://www.npmjs.com/package/fa-icons

npm install fa-icons

and then in your code, import the library, and use the icons with:

<fa-icons> </fa-icons>

example below

import { LitElement, html} from 'lit-element';
import 'fa-icons';
 
class SomeClass extends LitElement {
 render() {
    return html`
      <div>
         <fa-icon class="fas fa-address-card" color="#2980B9" size="2em"></fa-icon>
      </div>
    `;
  }
}
 
customElements.define('custom-component', SomeClass );
eljapi
  • 146
  • 1
  • 4
0

Another way I have used for LitElement is as follows:

import { LitElement, html, customElement } from 'lit-element'

@customElement('font-awesomeness')
export class FontAwesomeness extends LitElement {
    render() {
        return html `
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
                integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
                crossorigin="anonymous"/>

            <i class="far fa-thumbs-up"></i>
        `
    }
}
Kendallvision
  • 1
0

You can import an external style sheet by adding a <link> element to your template.

Here's my runnable snippet.

index.html

<html>
<head>
  <title>Use Font Awesome 5 with LitElement</title>
  <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <script type="module" src="./my-element.js"></script>
</head>
<body>
  <my-element></my-element>
</body>
</html>

my-element.js

import { LitElement, html, css } from 'lit-element';

class MyElement extends LitElement {
  render() {
    return html`
    <link rel="stylesheet" href="./app-styles.css">
      <div>
        <i class="icon hat-wizard"></i>Hat Wizard
      </div>
    `;
  }
}

customElements.define('my-element', MyElement);

app-styles.css

You can use Unicode for this in CSS. See here for the official list of Unicode character codes in Font Awesome.

Note: Make sure to include the correct weight and Unicode value for the icon.

/* Step 1: Common Properties: All required to make icons render reliably */

.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}


/* Step 2: Reference Individual Icons */

.hat-wizard::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f6e8';
  display: inline-block;
  vertical-align: middle;
  font-weight: 900;
}
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
0

install fontawesome-free & fa-icons

npm i @fortawesome/fontawesome-free

npm i fa-icons

my-element.js

import { LitElement, html, css } from 'lit-element';
import 'fa-icons';

class MyElement extends LitElement {
  render() {
    return html`
      <div>
         <fa-icon class="fas fa-camera" color="#2980B9" size="2em"></fa-icon>
      </div>
    `;
  }
}

customElements.define('my-element', MyElement);
mohan mu
  • 73
  • 1
  • 4