Fontawesome 在我的反应应用程序中不起作用

【问题标题】：Fontawesome didn't work in my react applicationFontawesome 在我的反应应用程序中不起作用
【发布时间】：2019-07-21 20:20:19
【问题描述】：

我通过 npm 安装了 font-awesome。

"dependencies": {
        "@fortawesome/fontawesome-svg-core": "^1.2.15",
        "@fortawesome/free-solid-svg-icons": "^5.7.2",
        "@fortawesome/react-fontawesome": "^0.1.4",
        "axios": "^0.18.0",
        "jquery": "^3.3.1",
        "react": "^16.8.2",
        "react-dom": "^16.8.2",
        "react-scripts": "2.1.5"
    },

但是如何在我的应用中使用图标。

<i className="fas fa-home" ></i>
                        <b> Trang chủ </b>

但是没有用。

【问题讨论】：

标签： reactjs font-awesome

【解决方案1】：

从documentation 看来，您首先需要导入要使用的每个图标并将其注册到 Font Awesome 库。然后当你想使用图标时，将FontAwesomeIcon 导入为 React 组件，然后将其渲染。

例如：

在 App.js 中：

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

library.add(faHome)

然后在你的组件文件中：

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

export default props => {
    return (
        <span>
            <FontAwesomeIcon icon="home"/>
            <b>Trang chu</b>
        </span>
    )
}

【讨论】：