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

如果您想增加箭头的大小，您只需增加字体大小即可，因为您使用的是 font awsome。如果你想增加所有字体很棒的图标的字体大小，.fa{&nbsp;font-size: 100px;}但上面会增加每个Fa图标的大小，因此，与其只增加箭头的大小，.fa-angle-left{&nbsp; &nbsp; &nbsp; &nbsp; font-size: 100px;&nbsp; &nbsp; }&nbsp; &nbsp; .fa-angle-right{&nbsp; &nbsp; &nbsp; &nbsp; font-size: 100px;&nbsp; &nbsp; }所以这只会增加箭头的大小。

Answer 2

font Awesome 的美妙之处在于您可以对其应用 CSS 属性，更改颜色、大小等。在这种情况下，只需向图标添加一个类并编写一些 CSS 来更改大小：<i class="nav-arrow fa fa-angle-left text-dark"></i>.nav-arrow {&nbsp; &nbsp; font-size: 1.5em; /* or whatever value you prefer */}如果您不想添加自定义类，您还可以对以下位置的图标应用尺寸carousel-control：.carousel-control .fa-angle-left,.carousel-control .fa-angle-right {&nbsp; &nbsp; font-size: 1.5em;}