How to add icon to react-bootstrap navBar?

react-bootstrap
Kenneth picture Kenneth · Nov 29, 2016 · Viewed 22.7k times · Source

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

enter image description here

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

Thanks

Answer

wolendranh picture wolendranh · Nov 29, 2016

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

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More