Question

嘿，刚开始使用React，所以我通过npm下载了很棒的字体，并通过以下方式在App.js中导入了font-awesome.min.css文件

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

下面是两个代码

 <i className="fa fa-sun"/>
 <i className="fa fa-spinner fa-spin"/>

第一个不起作用，但是我从stackoverflow答案粘贴粘贴的第二个则很奇怪。我该如何解决？

Answer 1

我的CodeSandbox中也有同样的错误。 FontAwesome软件包的问题在于，它尝试使用node_modules目录中的字体，而从客户端无法使用。

另外，请注意您的图标是错误的。他们应该是：

<i className="fa fa-sun-o"/>
<i className="fa fa-spinner fa-spin"/>

Font Awesome现在有一个官方的React组件，可供所有希望在自己的React项目中使用我们的图标的人使用。

首先，获取Font Awesome SVG Core的软件包，免费的纯色图标软件包以及Font Awesome React组件：

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

然后在您的应用中，导入图标并将其添加到库中：

App.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

最后，使用JSX中的组件和图标：

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

export const Food = () => (
  <div>
    Favorite Food: <FontAwesomeIcon icon="stroopwafel" />
  </div>
)

参考：How to Install and Use FontAwesome with React。

另一种简单的方法是使用FontAwesome CDN：

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

此处的工作片段： CodeSandbox

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <i className="fa fa-sun-o" />
      <i className="fa fa-spinner fa-spin" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

.App {
  font-family: sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

如果您仅在public / index.html的head标签中导入fontawesome工具包，则无需安装fontawesome库。

您可以在fontawesome网站上找到您的fontawesome工具包的网址。

只需将此脚本放在head / tag下的public / index.html中，它就可以工作。

在我的应用程序中添加超棒的图标

2 个答案:

App.js