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

【问题标题】：fontawesome icon not working correctly in react.jsfontawesome 图标在 react.js 中无法正常工作
【发布时间】：2017-08-08 00:28:41
【问题描述】：

谁能给我一个在 React.js 中使用 font-awesome 的例子吗？我已经导入了 react font-awesome。但该图标未显示在浏览器上。我可以看到 dom 上已经设置了类名，但是没有与 dom 关联的 CSS 样式。

我遵循的步骤

1) npm install --save react-fontawesome

2) 在我的 JS 文件中：

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

【问题讨论】：

您可能需要利用名称（例如）。
在某些顶级组件（您的应用程序或页面）中，您需要包含实际引入 FontAwesome 字体和类的 CSS。否则，您的班级名称没有任何意义。因此，在您的 App.js（例如）中，您将添加如下内容： import 'font-awesome/css/font-awesome.css';
通过 npm 安装时 react-awesome 中没有 css 文件。为此，我需要在根文件中包含 CDN。但我不想要反应很棒的 npm 和 CDN。我猜它可能已经过头了

标签： reactjs

【解决方案1】：

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

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

试试看，然后告诉我。

编辑：

我忘了说你应该导入 font awesome CSS

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

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

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

【讨论】：

我在 webpack 中添加了上面的代码。我得到的是 DOM 中的 span.fa.fa-rocket.fa-lg，尺寸为 0*30。我猜是因为尺寸它没有显示出来
杰克...我在 react-fontawesome 中没有任何 css 文件...我做过 npm install react-fontawesome ...不知道为什么...所以在导入导入时'font-awesome/css/font-awesome.css' 我找不到模块
尝试只安装 font awesome，react font-awesome 是一个矫枉过正的工具 npm install font-awesome，然后按照我写的步骤进行
谢谢杰克。我要使用字体很棒的 CDN

【解决方案2】：

派对迟到了，但最简单的方法是使用 fontawesome 网站上提到的@fortawesome/react-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} />

【讨论】：