Menu
I can't get the Font Awesome icons to work with LitElement, because CSS styles don't pierce the shadow boundaries of custom elements.
Is it possible to use Font Awesome or other icons with LitElement?
289
There is material icons in Polymer material library and the solutions used there helped me to solve the font awesome problem.
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);
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:
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"; }
after replacement:
.fa-yahoo:before {
content: "\\f19e"; }
try https://www.npmjs.com/package/fa-icons , this module is based in LitElement
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
