如何将图标添加到React-Bootstrap导航栏？

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>

然而，图标在导航栏中的位置不正确。 而且从官方网站上，我找不到任何添加图标到导航栏的例子。

谢谢。

- Kenneth

---

当寻找如何将个人资料图片添加到下拉列表中时，此内容会显示。这个Github问题很有帮助。title属性可以接受一个React元素。https://github.com/react-bootstrap/react-bootstrap/issues/928 - sww314

Answer 1

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

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

在JSFiddle上检查工作示例

根据您的图像大小，您可以调整它以符合您的代码

- wolendranh

---

如何在屏幕点击时关闭它？ - Ashh

Answer 2

这是一个不太优雅的解决方案，但我遇到了同样的问题，于是我给我的图片添加了一个名为“nav-logo-”的className，并进行了以下CSS操作：

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

- dianafaye17

---

这个方法对我很有效，现在已经过去了4年xD，非常感谢。 - Phil