bootstrap-5 - 引导程序更大的图标

Question

在下面的屏幕截图中，我尝试在 2 个不同的列中添加 2 个按钮图标，这些列也是一行的子项。

如您所见，我希望这些按钮在列中尽可能大。

这是我针对该特定行的代码；

  <div class="row">
                                <div class="col-md-6 mb-3 text-start">
                                    <label for="departure">VIP ($7000):</label>
                                    <input type="number" class="form-control" id="departure" placeholder="0" value="" required>
                                </div>
                                <div class="col-md-3 align-self-center">
                                    <i class="bi bi-plus-circle-fill"></i>
                                </div>
                                <div class="col-md-3 align-self-center">
                                    <i class="bi bi-plus-circle-fill "></i>
                                </div>

我尝试了一些东西，但无法得到正确的设计

Answer 1

font-size CSS 选项效果最好。

所以你可以做到。

i{
font-size: 50px;
}

以上将影响所有图标标签，也可能影响所有 HTML5 斜体标签。

或者您可以为您的图标添加一个类。CSS将是....

i .big-icon{
font-size: 50px;
}

随着 HTML 是....

<i class="bi bi-plus-circle-fill big-icon"></i>

这是 GetBootstrap 文档的链接....

https://icons.getbootstrap.com/#styling