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

Question

我想在Bootstrap 4导航栏上放置一些自定义图标按钮。我试过用这样的东西放置按钮：

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

按钮显示在导航栏上，但它在顶部对齐。我想让它中间对齐（垂直）。我尝试了各种CSS样式，如margin-top和padding-top，但它没有改变任何东西。我也试过我们class =“d-inline-block align-middle”，但图标仍然在顶部对齐。

Screenshot of miss aligned icon. I scaled it to be small to better illustrate the problem

有人可以帮我正确使用Bootstrap 4导航栏中的图标吗？

Answer 1

short-hack尝试遵循css：

.align-middle {
    position:relative;
    top:4px
}

否则你可以设置填充而不是line-height，或者从图像中移除浮动并将其作为内联元素放置......

但是：我会推荐像icomoon这样的图标字体工具，用于在导航栏中放置自定义图标。 （http://icomoon.io/app/）