向我的 React 应用程序添加字体很棒的图标

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 包、Free solid icon 包和 Font Awesome React 组件：

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

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

应用程序.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>
)

参考：如何在 React 中安装和使用 FontAwesome。

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

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

library.add(faStroopwafel)

这里的工作片段：CodeSandbox

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

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

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

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);