Question

我试图使用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>

我觉得应该是标签。我尝试将...更改为{＆＃34}中的...;编辑为HTML＆＃34;在开发工具和图标仍然没有显示。

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

有人能告诉我，我是否遗漏了什么？除了react-fontawesome之外，我还需要一些其他软件包吗？我是否需要导入标准字体-awesome.css或加载字体真棒CDN？非常感谢任何帮助，谢谢！

Answer 1

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

注意：此组件不包含任何Font Awesome CSS或字体，因此您需要确保以某种方式包含这些内容，方法是将它们添加到构建过程或链接到CDN versions。

所以最简单的方法是链接到你的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>

Answer 2

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

您可以看到开发人员在第5行包含了字体非常棒的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

Answer 3

运行npm install font-awesome --save

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

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

Answer 4

对于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

Answer 5

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

安装npm font-awesome包。如果您使用npm run npm install font-awesome --save或使用纱线，则运行yarn add font-awesome
现在您只需要通过撰写font-awesome.less

less

import 'font-awesome/less/font-awesome.less'

现在你应该看到你的图标工作了：）

Answer 6

从包本身导入 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以获取更多信息

Answer 7

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

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

Answer 8

我上班的唯一例子实际上是最新的并且没有抛出“无法解决'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"));

Answer 9

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

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

Answer 10

尝试添加https://use.fontawesome.com/3bd7769ce1.js'>到您的反应项目中的主index.html。

Answer 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来使用建议功能来确定图标并在导入图标时更改包。

react-fontawesome不显示图标

11 个答案: