增加 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 awesome 的妙处在于，您可以对它们应用 CSS 属性，更改颜色、大小等内容。在这种情况下，只需在图标上添加一个 class 并写入稍微 CSS 改变尺寸：

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

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

如果您不想添加自定义 class，您还可以将尺寸应用到 carousel-control 中的图标：

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

Answer 2

如果你想增加箭头的大小，你可以简单地增加字体大小，因为你正在使用 awsome 字体。

如果您想增加所有字体 awsome 图标的字体大小，

.fa{
 font-size: 100px;
}

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

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

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

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

增加 bootstrap 中的导航箭头大小 4

Increase the navigation arrow size in bootstrap 4

html

css

carousel

twitter-bootstrap

bootstrap-4