如何在 Polymer LitElement 中使用 Font Awesome

Question

我无法让 Font Awesome 图标与 LitElement 一起使用，因为 CSS 样式不会穿透自定义元素的阴影边界。

是否可以在 LitElement 中使用 Font Awesome 或其他图标？

Answer 1

Polymer material 库中有 material 个图标，那里使用的解决方案帮助我解决了字体问题。

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

Answer 2

另一种我用于 LitElement 的方法如下：

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

Answer 3

试试https://www.npmjs.com/package/fa-icons，这个模块基于LitElement

Answer 4

您可以通过向模板添加 <link> 元素来导入外部样式 sheet。

这是我的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>

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

应用-styles.css

您可以在 CSS 中为此使用 Unicode。 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;
}

Answer 5

如果有人仍然遇到此问题，这将非常有帮助

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

npm install fa-icons

然后在您的代码中导入库，并使用图标：

<fa-icons> </fa-icons>

下面的例子

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

如何在 Polymer LitElement 中使用 Font Awesome

How to use Font Awesome with Polymer LitElement

font-awesome

lit-element

polymer-3.x

index.html

我的-element.js

应用-styles.css