fontawesome图标在react.js中无法正常工作

Question

有人能给我一个在React.js中使用font-awesome的例子吗？ 我已经导入了反应字体 - 真棒。但该图标未显示在浏览器上。我可以看到在dom上设置了classname，但没有与dom相关联的CSS样式。

我跟着的步骤

1）npm install --save react-fontawesome

2）在我的JS文件中：

   import FontAwesome from 'react-fontawesome';
   <FontAwesome name="rocket size="lg"" />

Answer 1

如果您使用带有react.js的webpack，您需要做的是使用加载程序加载字体，首先安装font-awesome然后 在webpack中配置加载器。

{
    test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'file-loader',
}

尝试一下，让我知道。

修改

我忘了提到你应该导入字体很棒的CSS

import 'font-awesome/css/font-awesome.css'

然后像任何其他类一样引用：

<span className="fa fa-facebook"></span>

Answer 2

聚会迟到，但最简单的方法是使用 @fortawesome/react-fontawesome，如 fontawesome 网站上所述。 安装包

 yarn add @fortawesome/fontawesome-svg-core
 yarn add @fortawesome/free-solid-svg-icons
 yarn add @fortawesome/react-fontawesome

之后只需导入包

import { faCog } from "@fortawesome/free-solid-svg-icons"

并使用它

<FontAwesomeIcon icon={faCog} />