How to add icon to react-bootstrap navBar?

Question

I'm using react-bootstrap and trying to add an icon to the 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 not positioned properly in the navbar

And from the official site, i can't find any example of adding icon to the navbar.

Thanks

Answer 1

I think you will need to add a bit of CSS there.

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

Check working example on JSFiddle

Depending on your image size you can adjust it for your code

Answer 2

It's a dirty hack, but I had the same problem and added a className, 'nav-logo-' to my image and then did the following CSS:

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