聚合物材料库中有材料图标，那里使用的解决方案帮助我解决了字体问题。
索引.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>
`;
然后你必须更换所有\ with \\。例子：
.fa-yahoo:before {
content: "\f19e"; }
更换后：
.fa-yahoo:before {
content: "\\f19e"; }
