如何在Polymer LitElement中使用Awesome字体 [英] How to use Font Awesome with Polymer LitElement
问题描述
我无法让Font Awesome图标与LitElement一起使用，因为CSS样式不会穿透自定义元素的阴影边界.
I can't get the Font Awesome icons to work with LitElement, because CSS styles don't pierce the shadow boundaries of custom elements.
是否可以将Font Awesome或其他图标与LitElement一起使用?
Is it possible to use Font Awesome or other icons with LitElement?
推荐答案
Polymer材质库中有材质图标，并且所使用的解决方案帮助我解决了字体真棒问题.
There is material icons in Polymer material library and the solutions used there helped me to solve the font awesome problem.
index.html:
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:
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"重命名.修改文件.
And then you need to customize font awesome css-file. Download the css and rename it with ".js". Modify the file.
css/fontawesome-all.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>
`;
然后必须将所有'\'替换为'\\'.示例:
And then you must replace all '\' with '\\'. Example:
.fa-yahoo:before {
content: "\f19e"; }
更换后:
.fa-yahoo:before {
content: "\\f19e"; }
这篇关于如何在Polymer LitElement中使用Awesome字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
