Увеличьте размер навигационной стрелки в bootstrap 4

Question

Я пытаюсь создать карусель с двумя левыми правыми навигационными стрелками в bootstrap 4.

Вот мой код для контроллеров

<!-- Carousel controls -->
                        <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
                            <i class="fa fa-angle-left text-dark"></i>
                        </a>
                        <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
                            <i class="fa fa-angle-right text-dark"></i>
                        </a>

Так что, как вы можете видеть, я Использовал шрифт потрясающе для вставки стрелок. Теперь моя проблема в том, что стрелки по умолчанию слишком малы

Как мне увеличить размер двух стрелок?

Answer 1

Если вы хотите увеличить размер стрелок, вы можете просто увеличить размер шрифта, так как вы используете потрясающий шрифт.

Если вы хотите увеличить размер шрифта всех значков шрифта,

.fa{
 font-size: 100px;
}

Но приведенное выше увеличит размер каждого значка Фа каждый,

Таким образом, вместо того, чтобы увеличить размеры только стрелок,

.fa-angle-left{
        font-size: 100px;
    }
    .fa-angle-right{
        font-size: 100px;
    }

Так что это увеличит только размер стрелок.

Answer 2

Замечательная особенность шрифта - это то, что вы можете применять к ним CSS свойства, меняя цвет, размер и т. Д. c. В этом случае просто добавьте класс к значку и напишите немного CSS, чтобы изменить размер:

<i class="nav-arrow fa fa-angle-left text-dark"></i>

.nav-arrow {
    font-size: 1.5em; /* or whatever value you prefer */
}

Если вы не хотите добавлять пользовательский класс, вы также можете применить размер к значкам в carousel-control:

.carousel-control .fa-angle-left,
.carousel-control .fa-angle-right {
    font-size: 1.5em;
}