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

 font-size: 100px;

}

但上面会增加每个Fa图标的大小，

因此，与其只增加箭头的大小，

.fa-angle-left{

        font-size: 100px;

    }

    .fa-angle-right{

        font-size: 100px;

    }

所以这只会增加箭头的大小。

Answer 2

font Awesome 的美妙之处在于您可以对其应用 CSS 属性，更改颜色、大小等。在这种情况下，只需向图标添加一个类并编写一些 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;

}