Значки шрифта не отображаются, реагируют - PullRequest
Новая
       8

Значки шрифта не отображаются, реагируют

0 голосов
/ 10 ноября 2018

Я использую шрифт awesome и импортировал его в index.js 

import '././styles/fontawesome/css/fontawesome.min.css';

следующий за компонентом фильтра 

<span  onClick={this.togglem.bind(this)}>
                 {/*<span className="rTitle">Filters</span>*/}
                 <i className="fa fa-filter" aria-hidden="true"></i>
</span>

Здесь значок fa-filter не отображается, может кто-нибудь знает, что происходит

Использование двойных точек выдает это исключение. Вы попытались импортировать .. / .. / .. / styles / fontawesome / css / fontawesome.min.css , который находится вне проекта каталог src / . Относительный импорт за пределами src / не поддерживается.

структура 

  src/filter.js  

  src/styles/fontawesome

версия -5.5.0

я импортировал в фильтр, все в порядке, он показывает стили CSS при осмотре, но не показывает значок

1 Ответ

0 голосов
/ 10 ноября 2018

Ваш импорт выглядит неправильно import '././styles/fontawesome/css/fontawesome.min.css'; вы, вероятно, ищете import '../../styles/fontawesome/css/fontawesome.min.css'; (обратите внимание на точки).

Если вы используете React с JSX (вы, скорее всего, делаете это), вам нужно использовать className для определения атрибута класса html: 

<i className="fa fa-filter" aria-hidden="true"></i>

Кроме того, правильный способ использования FontAwesome в React описан здесь: https://fontawesome.com/how-to-use/on-the-web/using-with/react

...