Twitter bootstrap 在Bootstrap 4导航栏中使用自定义图标作为按钮

我想在Bootstrap4导航栏上放置一些自定义图标按钮。我尝试过用如下方式放置按钮：

<a class="nav-item" href="#">
    <img class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">
</a>

按钮显示在导航栏上，但在顶部对齐。我想让它中间对齐（垂直）。我尝试过各种CSS样式，比如页边空白和填充顶部，但它并没有改变任何东西。我还尝试使用class=“d-inline-block align middle”，但图标仍然在顶部对齐

---

有人能帮我在Bootstrap 4导航栏中使用图标的正确方法吗？

short hack请尝试以下css：

。中间对齐{
位置：相对位置；
顶部：4px
}

谢谢！这很有效。使用图标的优点是什么？如果您使用iconfonts，您可以像处理文本一样处理它（css颜色、字体大小、文本对齐、悬停效果等等）。。此外，如果你需要很多图标，它只是一个请求，而不是多个http请求。。。你的网站加载速度会更快，你有比使用png更多的选择。。。而且因为它的矢量格式，它在你看到的每个设备上看起来都更干净（没有模糊的边缘）。。。没有一个单一的原因，仍然使用png的图标：）但如果我需要一些颜色的图标，例如一个用白线画的文档图标，上面有一个红色的十字怎么办。可以用图标字体吗？@Gøngevangen-抱歉，有点延迟。。。不是使用iconfonts，而是使用svg图标（同样由icomoon支持）