如何将图标添加到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上的工作示例

根据您的图像大小,您可以根据代码进行调整