Question

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

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

您需要安装font-awesome并导入，

npm install font-awesome --save

导入index.js文件

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

有关如何使用font-awesome图标的更多信息，请参见this。

Answer 2

<块引用>

首先，您应该安装“bootstrap-icons”npm 包：

npm install bootstrap-icons

<块引用>

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

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

Answer 3

据我所知Bootstrap 4.*本身不支持Glyphicon，因此您应该使用替代方法，或者降级为bootstrap 3.*，这是不推荐的。 Fontawesome.com是一个选择。

Answer 4

我知道这个问题有一个公认的答案，但它适用于和我犯过同样错误的其他人。在 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" rel="stylesheet"> 中添加此 index.html 标签，它具有网络字体 cdn 链接。在引导程序的 usage 中给出了为图标字体添加此链接。不要只安装和 <i> 标签。我找到了here

Bootstrap图标未出现在react js项目中

4 个答案: