Bootstrap 4 如何在导航栏文本上方添加图像？

【问题标题】：Bootstrap4 how to add iamge above navbar text?Bootstrap 4 如何在导航栏文本上方添加图像？
【发布时间】：2020-07-06 02:13:36
【问题描述】：

我正在使用引导程序 4。我正在尝试复制带有文本上方图标的导航栏，如下所示。我尝试创建自己的类并使用，但它破坏了导航的格式

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

如果没有看到您的代码，很难具体回答，但是，here、here 和 here 在其他时候已经回答了这个问题，并提供了一些很好的示例和代码 sn-ps。

【讨论】：

【解决方案2】：

像这样？

span {
  display: block;
}

button{
  border:none;
  padding:0 20px;
}

img{
width:50px;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class='nav'>
  <button class="btn">
   <img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg">
   <span>Support</span>
  </button>
</div>

【讨论】：

是的，像这样的......但是我希望使用我自己的 .png 图标
好的，现在替换img标签中src的值。
它打破了格式.. 我目前的导航栏方式是
关于一个>

【解决方案3】：

样式与nav无关

HTML：

<a class="nav-with-icon">
  <img src="/image/path/photo.jpg />
  Support
</a>

CSS：

.nav-with-icon {
  display: flex;
  flex-direction: column;
  text-align: center;
}

我没试过，但应该可以。

【讨论】：

谢谢！这就是我要的。但是，如何将图标图像替换为我自己的图像而不是使用该类？当我使用图像标签时，它会破坏整个导航栏
只需将span 替换为img。在我的答案中编辑