How to add an icon to the navBar bootstrap reaction?

Question

I am using action-bootstrap and trying to add an icon to NavBar

      <Navbar.Header>
        <Navbar.Brand>
          <a href="#">&#9776; React-Bootstrap
          <img src={logo} style={{width:100, marginTop: -7}} />
          </a>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>

However, the icon is incorrect in the navigation bar.

And from the official site I can’t find an example of adding an icon to the navigation bar.

thank

Answer 1

I think you need to add some CSS.

.navbar-brand {
  display: flex;
  align-items: center;
}
.navbar-brand>img {
  padding: 7px 14px;
}

Check working example on JSFiddle

Depending on the size of the image, you can customize it for your code

Answer 2

This is a dirty hack, but I had the same problem and added the class name, "nav-logo-" to my image, and then did the following CSS:

.nav-logo {
  float: left !important;
  margin-top: -15px !important;
}