如何将图标添加到 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

这是一个肮脏的黑客，但我遇到了同样的问题并添加了一个类名 'nav-logo-' 到我的图像，然后执行了以下操作 CSS:

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

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

How to add icon to react-bootstrap navBar?

react-bootstrap