React js 项目中未出现 Bootstrap 图标

Question

我使用以下命令创建了一个反应项目：

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;

Answer 1

首先，你应该安装“bootstrap-icons”npm 包:

npm install bootstrap-icons

然后，在你的index.js文件中导入“bootstrap-icons.css”:

import "bootstrap-icons/font/bootstrap-icons.css";

Answer 2

您需要安装

font-awesome

并导入相同的，

npm install font-awesome --save

导入

index.js

文件

import 'font-awesome/css/font-awesome.min.css';

有关如何使用

font-awesome

图标的更多信息，请参阅 this。

Answer 3

我知道这个问题有一个公认的答案，但它是针对那些和我犯了同样错误的人的。在

<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">

中添加这个

index.html

标签，它有网页字体cdn链接。 Bootstrap 的 usage 中给出了添加图标字体链接的方法。不要只安装和

<i>

标签。我在这里找到了

Answer 4

据我所知，

Bootstrap 4.*

本身不支持

Glyphicon

，所以你应该使用替代方案，或者降级到

bootstrap 3.*

，这是不推荐的。

Fontawesome.com

是一个选项。

Answer 5

我知道这已经晚了，但我遇到了同样的问题，我已经安装了 npm 并在我的 index.html 中完成了操作，但图标仍然没有显示，直到我添加这个 @import url("https://cdn. jsdelivr.net/npm/[电子邮件受保护]/font/bootstrap-icons.min.css");在我的index.css中