无法在Reactjs项目中导入字体

我试图在我的Reactjs项目中使用

font-awesome

，但导入时遇到问题

你安装了它吗

npm install --save font-awesome

在我的index.js文件中导入了它

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

webpack.config.js

已将加载程序添加到我的网页包中

{
  test: /font-awesome\.config\.js/,
  use: [
        { loader: 'style-loader' },
        { loader: 'font-awesome-loader' }
       ]
}

然后尝试在我的代码中使用它

<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>

我应该使用什么加载程序而不是我使用的加载程序？

使用FontAwsome的：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons'

...

render() {
  return (
    <FontAwesomeIcon icon={faAngleDoubleDown} pulse />
  )
}

从'@fortawesome/react-fontawesome'导入{FontAwesomeIcon}
从“@fortawesome/free solid svg icons”导入{faAngleDoubleDown}
...
render（）{
返回(
)
}

---

您可以通过添加

pulse

或

spin

boolean prop来使用所需的动画。

这是什么

test:/font awesome\.config\.js/，

假设要做什么？

test

应该匹配要转换的文件这是在React项目中安装font awesome的推荐方法>`test:/（\？[a-z0-9]+）？$/`@marzelin应该这样说。以匹配文件。我的错误。没有任何错误，但仍然没有显示正确的

您是否在应用程序顶部导入了

font-awesome

模块？我也尝试过。但我应该如何添加我想要的图标呢。例如，此处添加的

faStroopwafel

与

library.add（faStroopwafel）

类似，我应该如何添加

并显示它？我推荐的库是一个不推荐使用的解决方案。我修正了我的例子。您现在只需使用CamelCase版本的名称即可使用任何图标，如

faAngleDoubleDown

。谢谢您的回答！现在可以了。也许这就是为什么它第一次对我不起作用。谢谢你，伙计！

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons'

...

render() {
  return (
    <FontAwesomeIcon icon={faAngleDoubleDown} pulse />
  )
}