CODEWITHSUNDEEP
reactjsbootstrap-4
user1687891
user1687891

Reputation: 864

Bootstrap icons not appear in the react js project

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;

Upvotes: 18

Views: 40286

Answers (6)

Fahimeh Ahmadi
Fahimeh Ahmadi

Reputation: 1029

I have bootstrap 1.11.3 using I have also imported bootstrap into the index.html file

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

sample:

<i class="bi bi-linkedin"></i>

Upvotes: 0

M Prasaanth
M Prasaanth

Reputation: 13

I know this is late but i had the same issue, i had already npm installed and done the in my index.html but the icon still wasn't showing up untill i add this @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"); in my index.css

Upvotes: 0

Sai_F16
Sai_F16

Reputation: 720

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

Upvotes: 72

Soham Gadhave
Soham Gadhave

Reputation: 95

I know this question has an accepted answer, but it's for others who did the same mistake as I did. Add this <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"> tag in index.html, it has the web fonts cdn link. It's given in bootstrap's usage to add this link for icon fonts. Don' just install and the <i> tag. I found it here

Upvotes: 3

mexam
mexam

Reputation: 515

As far as I know Bootstrap 4.* doesn't support Glyphicon natively, so you should use an alternative, or downgrade to bootstrap 3.* which is not recommended. Fontawesome.com is an option.

Upvotes: 2

ravibagul91
ravibagul91

Reputation: 20755

You need to install font-awesome and import the same,

npm install font-awesome --save

import in index.js file

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

For more on how to use font-awesome icons see this.

Upvotes: 11

Related Questions