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

【问题标题】：How to create an icon menu with Bootstrap 4?如何使用 Bootstrap 4 创建图标菜单？
【发布时间】：2018-11-10 23:20:14
【问题描述】：

我正在创建一个带有图标（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;
}

也许我没有以正确的方式集成？

给链接固定大小是最好的方法吗？

【问题讨论】：

请添加您的 CSS。请阅读：How to create a Minimal, Complete, and Verifiable example
我认为您需要使图标高度相同... snd 将 class="img-fluid" 添加到每个 img

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

不幸的是，我们为客户端选择了自定义图标:(

【解决方案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?得到更详细的答案

【讨论】：