Fontawesome didn't work in my react application - reactjs

Question

I installed font-awesome via npm.
"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"
},
But how can i use icon in my app.
<i className="fas fa-home" ></i>
<b> Trang chủ </b>
but it didn't work.

Answer 1

From the documentation, it looks like you first need import each icon that you want to use and register it with the Font Awesome library. Then when you want to use an icon, import FontAwesomeIcon as a React component and then render it as such.
For example:
In 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)
Then in your component file:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export default props => {
return (
<span>
<FontAwesomeIcon icon="home"/>
<b>Trang chu</b>
</span>
)
}