reactjs - 引导图标未出现在反应 js 项目中
问题描述
我使用以下命令创建了一个反应项目:
npx create-react-app project
我已经使用 npm 命令安装了 bootstrap 4.3.1,并且我还将 bootstrap 导入到了 index.js 文件中
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
但由于某种原因,它没有显示图标。
export class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-dark mb-5">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand text-white text-lg brand-text" to="/">
MovieSeriesInfo</a>
</div>
<ul className="navbar-nav ml-auto text-light d-inline-block">
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-imdb fa-5x" id="imdb-logo" />
</li>
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-react fa-5x" id="react-logo" />
</li>
</ul>
</div>
</nav>
</div>
)
}
}
export default Navbar;
解决方案
首先,您应该安装“bootstrap-icons”npm 包:
npm install bootstrap-icons
然后,在 index.js 文件中导入“bootstrap-icons.css”:
import "bootstrap-icons/font/bootstrap-icons.css";
推荐阅读
- php - AWS HTTPS 丢弃 HTTP_REFERER
- node.js - 如何为 Nodejs 模块创建配方(Yocto 构建环境)
- java - 分页查询不是幂等的?
- azure - 使用 nodemcu 向 Azure 事件中心发送消息
- r - 使用在 R 中设置为均值的控制变量获得拟合值
- google-data-studio - Datastudio 拆分并转换字符串
- mysql - 如何四舍五入MySQL存储过程中的值
- android - 从最近关闭应用程序不会清除内存数据
- mongodb - 在 MongoDB 集合中获取每个组的最后一个的性能
- python - 来自字符串的Python枚举,如果字符串不在成员中,则会引发错误