Bootstrap icons not appear in the react js project

Question

I have created a react project using following command:

npx create-react-app project

I have installed bootstrap 4.3.1 using npm command and I have also imported bootstrap into the index.js file

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';

But for some reason it is not displaying icons.

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

First, you should install "bootstrap-icons" npm package:

npm install bootstrap-icons

Then, import "bootstrap-icons.css" in your index.js file:

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