如何将图标添加到react-bootstrap navBar？

Question

我正在使用react-bootstrap并尝试向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>

但是，图标未在导航栏中正确定位

从官方网站上，我找不到任何向导航栏添加图标的示例。

由于

Answer 1

我认为你需要在那里添加一些CSS。

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

查看JSFiddle

上的工作示例

根据您的图片尺寸，您可以根据代码进行调整

Answer 2

这是一个肮脏的黑客，但我遇到了同样的问题，并添加了一个className，＆＃39; nav-logo - ＆＃39;到我的图像，然后做了以下CSS：

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