Как создать значок меню с помощью Bootstrap 4?

Question

Я создаю навигационную панель с иконками (svg icons).

Как лучше всего добиться этого с помощью 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

Существуют классы для значков в поиске при начальной загрузке, и проверьте их, используйте эти классы в элементе span, например, <span class="caret"></span>, это приведет к выпадающему значку, а другие значки просто проверят их

Answer 2

Хорошо, мой второй вариант, почему бы вам не создать свой собственный класс значков, например .icon-car { background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); background-position: center center; } Здесь вы можете получить более подробный ответ Как добавить собственный значок в Twitter Bootstrap?

Answer 3

Попробуйте этот код.

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