7

CSS スタイルはカスタム要素の影の境界を貫通しないため、Font Awesome アイコンを LitElement で動作させることができません。

LitElement で Font Awesome やその他のアイコンを使用することはできますか?

4

5 に答える 5

6

Polymerマテリアルライブラリにはマテリアルアイコンがあり、そこで使用されているソリューションはフォントの素晴らしい問題を解決するのに役立ちました.

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);

次に、font awesome css ファイルをカスタマイズする必要があります。css をダウンロードし、名前を「.js」に変更します。ファイルを変更します。

css/fontawesome-all.css.js:

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

export const FaStyles = html`
<style>

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

  </style>
`;

そして、すべての '\' を '\\' に置き換える必要があります。例：

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

交換後：

.fa-yahoo:before {
  content: "\\f19e"; }
于 2018-05-15T04:31:00.470 に答える