How to create an icon menu with Bootstrap 4?

Question

I am creating a navbar with icons (svg icons).

What is the best way to achieve this with Bootstrap 4?

This is what I want:

This is the closest I've achieved (without giving a fixed size to my icons or the link) is:

<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>

Using the following 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;
}

Maybe I'm not integrating the right way?

Is giving the link a fixed size the best way?

Answer 1

Try This Code.

<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

引导搜索中有一些图标类，可以在span元素中使用这些类来检出它们，例如<span class="caret"></span>这将导致出现一个下拉图标，还有更多的图标需要检查出

Answer 3

Ok my second option why don't you create your own icon class for example .icon-car { background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); background-position: center center; } .icon-car { background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); background-position: center center; } .icon-car { background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); background-position: center center; } You can have a more detailed answer in here How to add custom icon in Twitter Bootstrap?