reactjs - Fontawesome 在我的反应应用程序中不起作用
问题描述
我通过 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>
但它没有用。
解决方案
从文档看来,您首先需要导入每个要使用的图标并将其注册到 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>
)
}
推荐阅读
- python - 如何撰写带有数据框的电子邮件作为正文中的表格以及一些文本?
- laravel - 在数据库连接上指定主机
- java - Spring boot admin:客户端无法通过 https 向管理服务器注册
- swift - 如何居中水平图像列表SwiftUI
- docker - docker 中的所有 `npm install` 都已损坏
- laravel - 注册并登录谷歌
- r - 订购具有由“|”分隔的值的 csv 数据框 在 R?
- android - 由于 react-native-svg,iOS 无法构建
- css - 当硬编码值正常工作时,sass:color 失败
- xaml - 将通知标题和日期分开的好方法是什么?在设备的两个方向