Призрачный компонент не отображает значок Font Awesome 5 - PullRequest
Новая
       5

Призрачный компонент не отображает значок Font Awesome 5

0 голосов
/ 13 февраля 2020

Компонент Haunted создается со следующим кодом.

index. html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset='UTF-8'>
    <script type="module" src="cute-app.js"></script>
</head>
<body>
  <cute-app name='a cute lit-html app.'></cute-app>  
</body>
</html>

cute-app. js: 

import { html, component, useState } from 'haunted';
import './lister';

function CuteApp() {
    const initItems = [{
        id: 1, text: 'Cras justo odio', active: false
    }, {
        id: 2, text: 'Dapibus ac facilisis in', active: false
    }, {
        id: 3, text: 'Morbi leo risuso', active: false
    }, {
        id: 4, text: 'Porta ac consectetur ac', active: false
    }, {
        id: 5, text: 'Vestibulum at eros', active: false
    }];

    const [items, setItems] = useState(initItems);

    const setActive = (id) => {
        setItems(items.map(item => item.id === id ? {...item, active: true} : {...item, active: false}));
    };

    return html`
        <my-lister @myEvt=${(evt) => setActive(evt.detail + 1)} .items=${items}></my-lister>
    `;
};

customElements.define('cute-app', component(CuteApp));

lister. js: 

import {
  html,
  component,
  useState,
  useEffect
} from 'haunted';

function Lister({ items, click }) {
const [id, setId] = useState(0);

useEffect(() => {
    const event = new CustomEvent('myEvt', {
        detail: id
    });
    this.dispatchEvent(event);
}, [id]);

const list = items && items.length > 0 && items.map((item, i) =>
    html`
        <li @click=${() => setId(i)} class="list-group-item ${item.active ? ' active' : ''}">
            <i class='far fa-copy'></i> ${item.text}
        </li>
    `
);

return html`
    <link rel='stylesheet' href='css/bootstrap.css'>
    <link rel='stylesheet' href='css/all.css'>
    <ul class='list-group test-bg'>${list}</ul>
`;
};

customElements.define('my-lister', component(Lister));

Иконки FA 5 не загружаются на веб-страницу. Под структурой проекта отдельные файлы размещаются следующим образом: 

| - css
  \ - all.css
| - webfonts
  \ - all the FA 5 fonts
| - index.html
| - lister.js
| - cute-app.js

На странице html не отображаются значки

enter image description here

Как заставить значки отображаться на странице?

...