Как использовать Font Awesome с Polymer LitElement - PullRequest
Новая
       11

Как использовать Font Awesome с Polymer LitElement

0 голосов
/ 15 мая 2018

Я не могу заставить шрифты работать с LitElement, потому что стили css не выходят за границы теней пользовательских элементов.Можно ли использовать шрифт Awesome или другие иконки с LitElement?

Ответы [ 3 ]

0 голосов
/ 10 мая 2019

Другой способ, который я использовал для LitElement, выглядит следующим образом: 

import { LitElement, html, customElement } from 'lit-element'

@customElement('font-awesomeness')
export class FontAwesomeness extends LitElement {
    render() {
        return html `
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
                integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
                crossorigin="anonymous"/>

            <i class="far fa-thumbs-up"></i>
        `
    }
}
0 голосов
/ 09 июня 2019

try https://www.npmjs.com/package/fa-icons, этот модуль основан на LitElement

0 голосов
/ 15 мая 2018

В библиотеке материалов Polymer имеются значки материалов, и используемые там решения помогли мне решить проблему со шрифтами.

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);

И тогда вам нужно настроить шрифт. Загрузите 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"; }
...