React bootstrap icons doesnt work when I import bootstrap

Question

I don't see the bootstrap icons in a NavLink component when I import bootstrap.css.

I have a react project, I installed bootstrap using npm i bootstrap and I also installed react-bootstrap-icons using npm i react-bootstrap-icons. I imported bootstrap in index.js file (import "bootstrap/dist/css/bootstrap.css";) and one of my child components is using an icon:

import { DoorClosed } from "react-bootstrap-icons";
import { NavLink } from "react-router-dom";

export default function Header() {
  <NavLink to="/Login">
    <span className="logoutIcon-container tooltip" id="logoutBtn">
      <DoorClosed size={96} color="white" />
      <span className="tooltipText">Logout</span>
    </span>
  </NavLink>
}

But I do not see the icon. I have two solutions for the icon to show up, but none of them fit my project:

1. I can import the bootstrap grid system import "bootstrap/dist/css/bootstrap-grid.min.css" instead of import "bootstrap/dist/css/bootstrap.css" in index.js. (But, I no longer will be able to use bootstrap classes in my project.)

2. I can move the icon outside of the <NavLink/> component. (But I need it to be inside the component)

Any better solution?

Answer 1

• The Header component needs to return something to render, e.g. it should return the NavLink and rest of the JSX.
• I don't exactly know why the "tooltip" class is added to your link, but the issue here is that it sets an opacity: 0; CSS rule which makes the rendered UI not visible. Remove the "tooltip" class.

Code:

function Header() {
  return (                               // <-- Return JSX
    <NavLink to="/Login">
      <span
        className="logoutIcon-container" // <-- Remove "tooltip" class
        id="logoutBtn"
      >
        <DoorClosed size={96} color="white" />
        <span className="tooltipText">Logout</span>
      </span>
    </NavLink>
  );
}