Question

我无法获得使用LitElement的字体真棒图标，因为css样式不会刺穿自定义元素的阴影边界。是否可以使用字体真棒或其他图标与LitElement？

Answer 1

高分子材料库中有材料图标，这里使用的解决方案帮助我解决了字体非常棒的问题。

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

然后你需要自定义字体真棒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>元素来导入外部样式表。

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

您可以在CSS中为此使用Unicode。请参阅此处，以获取《字体真棒》中 Unicode character codes 的正式列表。

注意： 请确保为以下文件包含正确的 weight 和 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;
}

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

5 个答案:

index.html

my-element.js

app-styles.css