我无法让 Font Awesome 图标与 LitElement 一起使用，因为 CSS 样式不会穿透自定义元素的阴影边界。
是否可以将 Font Awesome 或其他图标与 LitElement 一起使用？
最佳答案
Polymer Material 库中有 Material 图标，那里使用的解决方案帮助我解决了 Font Awesome 问题。
索引.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"; }
关于font-awesome - 如何在 Polymer LitElement 中使用 Font Awesome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50342356/