如何使用Bootstrap 4创建图标菜单？

Question

我正在创建一个带图标的导航栏（svg图标）。

使用Bootstrap 4实现此目的的最佳方法是什么？

这就是我想要的：

这是我所取得的最接近的（没有给我的图标或链接固定大小）：

<div class="row justify-content-center">
    <div class="col-sm-10">
        <nav class="navbar d-flex align-items-end">
            <a class="navbar-item active" href="#">
                <img src="../images/icons/icon-type-blue.svg">
                Type</a>
            <a class="navbar-item" href="#">
                <img src="../images/icons/icon-size-lightgrey.svg">
                Size</a>
            <a class="navbar-item" href="#">
                <img src="../images/icons/icon-fitting-lightgrey.svg">
                Fitting</a>
            <a class="navbar-item" href="#">
                <img src="../images/icons/icon-results-lightgrey.svg">
                Results</a>
        </nav>
    </div>
</div>

使用以下CSS：

.navbar{
    padding: 2em;
    border-bottom: solid 2px #00588A;
}

.navbar a{
    font-size: 1.25em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #ccc;
}

.navbar a.active{
    color: #00588A;
}

.navbar a img{
    margin-bottom: 0.75em;
}

也许我没有采用正确的方式进行整合？

以最佳方式为链接提供固定大小？

Answer 1

试用此代码。

<div class="row justify-content-center">
    <div class="col-sm-12">
        <nav class="navbar d-flex align-items-end">
            <div class="col-sm-3">
                <a class="navbar-item active" href="#">
                <img src="../images/icons/icon-type-blue.svg">Type</a>
            </div>
            <div class="col-sm-3">
                <a class="navbar-item" href="#">
                <img src="../images/icons/icon-size-lightgrey.svg">Size</a>
            </div>
            <div class="col-sm-3">
                <a class="navbar-item" href="#">
                <img src="../images/icons/icon-fittinglightgrey.svg">Fitting</a>
            </div>
          <div class="col-sm-3">
                <a class="navbar-item" href="#">
                <img src="../images/icons/icon-resultslightgrey.svg">Results</a>
          </div>
        </nav>
    </div>
</div>

Answer 2

在bootstrap搜索中有图标类，并检查它们在span元素中使用这些类，例如<span class="caret"></span>这将导致一个下拉图标，并且有更多图标只是检查出来

Answer 3

好我的第二个选项为什么不创建自己的图标类，例如.icon-car { background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); background-position: center center; } 您可以在此处How to add custom icon in Twitter Bootstrap?

获得更详细的答案