How to use Font Awesome with Polymer LitElement

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?

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"; }

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

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>
        `
    }
}

来源：https://stackoverflow.com/questions/50342356/how-to-use-font-awesome-with-polymer-litelement

标签

polymer