react-fontawesome 不显示图标答案

【问题标题】：react-fontawesome not displaying iconsreact-fontawesome 不显示图标
【发布时间】：2017-07-20 05:16:36
【问题描述】：

我正在尝试使用 react-fontawesome 并以在我看来与自述文件完全相同的方式实现它：https://github.com/danawoodman/react-fontawesome/blob/master/readme.md

import React from 'react';
import FontAwesome from 'react-fontawesome'
...
export default class ComponentName extends React.Component {
    render() {
        return (
            <div>
                <div>
                    <span>
                        <FontAwesome
                            className='super-crazy-colors'
                            name='rocket'
                            size='2x'
                            spin
                            style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
                        />
                        SOME TEXT
                    </span>
                </div>
                ...
            </div>
        )
    }
}

但我在 DOM 中没有看到图标。虽然我确实在 Chrome 开发工具中看到：

<span style="text-shadow:0 1px 0 rgba(0, 0, 0, 0.1);" aria-hidden="true" class="fa fa-rocket fa-2x fa-spin super-crazy-colors" data-reactid=".0.$/=11.0.0.$/=10.$/=10.$/=10"></span>

我觉得应该是 标签。我尝试在开发工具的“编辑为 HTML”中将 ... 更改为 ...，但图标仍然没有显示。

我的插件中有 add-module-exports，webpack.config 的预设中有 stage-2。

如果我遗漏了什么，谁能告诉我？除了 react-fontawesome 之外，我还需要其他软件包来完成这项工作吗？我需要导入标准 font-awesome.css 还是加载 font-awesome CDN？任何帮助将不胜感激，谢谢！

【问题讨论】：

你真的需要 react font-awesome 还是只在 index.html 中包含 font-awesome 并正常使用。
基本上图标在那里，否则那里不会有任何跨度。我试过你的代码，它在我的身上工作得很好。尝试更改 css 颜色属性。
duwalanise，不幸的是，在这种情况下，我需要将它全部包含在 React 组件中，即我无法在 HTML 文件中加载 font-awesome.min.css。
DroidNoob，图标不存在。跨度标签可能在没有图标显示的情况下存在，例如，如果未加载关联的 CSS：带有class=fa fa-rocket 的跨度标签不会显示图标。我尝试更改 CSS 颜色属性，但没有做任何事情。
@Casey 检查此stackoverflow.com/a/44681641/5519872

标签： reactjs font-awesome

【解决方案1】：

我遇到了同样的问题。阅读他们的Readme.md，你会看到有这样的注释：

注意：此组件不包含任何 Font Awesome CSS 或字体，因此您需要确保以某种方式将它们包含在您的最后，或者通过将它们添加到您的构建过程或链接到 @ 987654322@.

所以最简单的方法是链接到你的html中的fontawesome cdn。

<head>
<meta charset="UTF-8">    
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" 
crossorigin="anonymous">
</head>

【讨论】：

这解决了我的问题！！非常感谢您的回答
对于那些不想（或不能）使用 CDN 版本的人，Font Awesome 允许您下载文件并自己托管：fontawesome.com/how-to-use/on-the-web/setup/… 这对我很有帮助，因为出于安全考虑，我有一个应用无法访问外部网络。
除了添加此 CDN 之外，您还需要添加您的套件吗？应该在此 CDN 链接 href 之前还是之后？
除了让生活过于复杂之外，这些包还有什么意义？  有什么问题？文档说要安装 3 个软件包（！），但它仍然无法开箱即用，这太荒谬了。

【解决方案2】：

运行npm install font-awesome --save

在您的 index.js 或 App.js 或 YourComponent.js 中，导入缩小的 CSS 文件。

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

【讨论】：

在此之后我得到一个空白矩形。
那不是旧版本吗？

【解决方案3】：

正如其他答案所提到的，您需要以某种方式在页面中包含图标。在此处查看react-fontawesome 示例： https://github.com/danawoodman/react-fontawesome/blob/master/examples/index.html

你可以看到开发者在第 5 行包含了 font-awesome CSS。

另外，Font Awesome v5 已经发布，您应该考虑迁移到它。在此处阅读相关文档： https://www.npmjs.com/package/@fortawesome/react-fontawesome

要使用 v5：

安装依赖：

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid

然后您的组件可以使用如下图标：

import ReactDOM from 'react-dom';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

const element = (
  <FontAwesomeIcon icon={faCoffee} />
)

ReactDOM.render(element, document.body);

您还可以在应用中构建常用图标库，以方便参考。在此处查看工作代码：https://codesandbox.io/s/8y251kv448

有关库函数的更多详细信息，请参见此处： https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

【讨论】：

谢谢，这是迄今为止唯一对我有用的解决方案

【解决方案4】：

我得到的唯一一个实际上看起来是最新的并且没有抛出“无法解决'react'错误的例子：

https://scotch.io/tutorials/using-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

【讨论】：

【解决方案5】：

这似乎非常适合 React

安装：

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

用法：

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

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

Font Awesome 5 React

【讨论】：

【解决方案6】：

正如@Alee 指出的那样，Fontaweome 字体不包含在包中。您必须自己导入它。

安装 npm font-awesome 包。如果你使用 npm 运行 npm install font-awesome --save 或者如果你使用 yarn 然后运行 yarn add font-awesome
现在你只需要在less目录下导入font-awesome.lessimport 'font-awesome/less/font-awesome.less'

现在你应该看到你的图标工作了:)

【讨论】：

【解决方案7】：

Font Awesome 现在有一个官方的 React 组件，可以在你的 React 应用程序中使用它们的图标。

第 1 步： 你必须使用像 npm 这样的包管理器在你的项目中安装 3 个重要的包：

    npm i --save @fortawesome/fontawesome-svg-core
    npm install --save @fortawesome/free-solid-svg-icons
    npm install --save @fortawesome/react-fontawesome

第 2 步： 如果您打算设计图标样式，则必须下载这两个额外的包：

     npm install --save @fortawesome/free-brands-svg-icons
     npm install --save @fortawesome/free-regular-svg-icons

第 3 步： 一旦你安装了项目所需的所有包，现在你可以使用这些图标了。像这样在你的组件中导入这个包：

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

之后，您可以像这样将图标导入组件中（例如使用类为“fas fa-atom”的图标）

   import { faAtom } from '@fortawesome/free-solid-svg-icons'

P.S ：您可以在一次导入中导入多个图标，并在它们之间添加一个逗号每一个。

第 4 步： 使用导入的图标

const element = <FontAwesomeIcon icon={faAtom} />

来源：https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

【讨论】：

【解决方案8】：

从包本身导入 fontawesome 样式而不加载任何外部 css：

import "@fortawesome/fontawesome-svg-core/styles.css"; // import Font Awesome CSS
import { config } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

请参阅article 以获取更多信息

【讨论】：

【解决方案9】：

复制并粘贴到您的 html ...

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">

【讨论】：

欢迎来到 SO。仅代码答案的得分不如那些解释代码如何回答问题的答案。用现有答案回答老问题时，有助于说明您的答案与其他答案有何不同或改进。

【解决方案10】：

我怀疑您尚未导入 FontAwesome 需要的 CSS - 从 FontAwesome 的网站下载缩小的 CSS 文件并将其导入您的 app.scss 文件或您要导入其他样式表的任何其他位置。

react-fontawesome 库正在帮助您创建具有类名称（如“向上箭头”）的元素，但如果没有样式表，您的项目将不知道有与这些类对应的图标。

【讨论】：

【解决方案11】：

最好一次安装所有东西，然后只导入你想要的图标，

npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome  @fortawesome/free-brands-svg-icons  @fortawesome/free-regular-svg-icons

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

确保从正确的包中导入图标，您可以使用ctrl + space 来使用建议的力量来查找图标并在导入图标时更改包。

【讨论】：

【解决方案12】：

尝试添加

<script src='https://use.fontawesome.com/3bd7769ce1.js'></script>

到你的 react 项目中的主要 index.html。

【讨论】：

那不会有任何好处，那不是 React 版本的 fontawesome