我无法使字体真棒图标与LitElement一起使用，因为CSS样式不会穿透自定义元素的阴影边界。是否可以在LitElement中使用超赞字体或其他图标？
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"; }