Login/Register
How to use Font Awesome with Polymer LitElement
Asked Answered
Solved font-awesomelit-elementpolymer-3.x
C

6

9

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?

Chengteh answered 15/5, 2018 at 4:31 Comment(0)
C
8

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"; }
Chengteh answered 15/5, 2018 at 4:31 Comment(4)
Hey i can't seem to get this solution to work do you know if it is still a valid way of doing things? – Amphitheater
I’m sorry I have not been using litElement lately – Chengteh
Your tip about using the double backslash in the content fixed my problems. Thank you. – Anselma
This I believe will add a <link> tag to head for each icon component. Not a scalable solution. – Electrometallurgy
M
2

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

Marchelle answered 9/6, 2019 at 2:56 Comment(1)
fa-icons assumes you're using FontAwesome icons as SVGs with the module hosted locally. – Philippe
P
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 );
Pontoon answered 29/12, 2020 at 21:53 Comment(1)
I believe this icon won't work with this library. <i class="fas fa-angle-double-down"></i> – Electrometallurgy
D
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>
        `
    }
}
Dogeatdog answered 10/5, 2019 at 13:42 Comment(2)
not working, bootstrap is working in this way but not fontawesome. – Stadiometer
fontawesome is working on Edge 44 but not on chrome 76.0 and firefox 69.0 why ? – Stadiometer
T
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;
}
Tomahawk answered 17/4, 2020 at 6:9 Comment(0)
I
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);
Inapt answered 3/8, 2022 at 20:36 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.