7

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

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

4

5 回答 5

6

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

索引.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);

然后你需要自定义字体真棒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 回答
2

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

于 2019-06-09T02:56:32.290 回答
1

如果有人仍然有这个问题，这非常有帮助

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

于 2020-12-29T21:53:34.077 回答
0

我用于 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>
        `
    }
}
于 2019-05-10T13:42:04.593 回答
0

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

这是我的可运行片段。

索引.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>

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

应用样式.css

您可以在 CSS 中为此使用 Unicode。有关Font Awesome中Unicode 字符代码的官方列表，请参见此处。

注意：确保为图标包含正确的权重和Unicode 值。

/* 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;
}

于 2020-04-17T06:09:24.730 回答