如何在React的render（）中包含一个Font Awesome图标

reactjs React.js

乐米亚

2020-03-12

每当我尝试在React的中使用Font Awesome图标时render()，尽管它可以在普通HTML中运行，但它不会显示在结果网页上。

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

这是一个实时示例：http : //jsfiddle.net/pLWS3/

哪里错了？

第1297篇《如何在React的render（）中包含一个Font Awesome图标》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
小卤蛋Stafan 2020.03.12

就我而言，我一直在关注react-fontawesome软件包的文档，但是在将图标设置到库中时，他们不清楚如何调用图标

这就是我在做什么：

App.js文件

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

组件文件

<FontAwesomeIcon icon={"coffee"} />

但是我收到这个错误

在此处输入图片说明 然后我在传递图标prop时添加了别名：

<FontAwesomeIcon icon={["fal", "coffee"]} />

它正在工作，您可以在icon.js文件中找到前缀值，在我的情况下是：faCoffee.js

伽罗理查德 2020.03.12

结帐反应图标很漂亮并且工作得很好。

Gil米亚 2020.03.12

我经历过这种情况。我需要应在生产中正常运行的react / redux站点。

但是有一个“严格模式”；不应该用这些命令吃午餐。

yarn global add serve
serve -s build

应该只使用build / index.html文件。当我将fontawesome与npm font-awesome一起使用时，它在开发模式下工作，但在“严格模式”下工作。

这是我的解决方案：

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

在public / index.html中

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

完成上述所有步骤后，fontawesome的效果很好！！！

小胖Sam 2020.03.12

React使用className属性，例如DOM。

如果您使用开发版本，并查看控制台，则会出现警告。您可以在jsfiddle上看到它。

警告：未知的DOM属性类。您是说className吗？

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android