字体真棒图标不显示反应

Question

我正在使用 font 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 样式 检查时但不显示图标

Answer 1

您的导入看起来错误import '././styles/fontawesome/css/fontawesome.min.css';，您可能正在寻找import '../../styles/fontawesome/css/fontawesome.min.css';（注意点）。

如果你在 JSX 中使用 React（你很可能会这样做），你需要使用 className 来定义 html 类属性：

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

此外，此处记录了在 React 中使用 FontAwesome 的正确方法：https://fontawesome.com/how-to-use/on-the-web/using-with/react