Bootstrap 更大的图标

Question

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

我希望按钮尽可能大，如您所见。

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

  <div class="row">
                                <div class="col-md-6 mb-3 text-start">
                                    <label for="departure">VIP (00):</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

字体大小 CSS 选项效果最佳。

所以你可以做到。

i{
font-size: 50px;
}

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

或者您可以在图标中添加 Class。 CSS 将是....

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

HTML 是……

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

这是 GetBootstrap 文档的 link....

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

Bootstrap 更大的图标

Bootstrap Bigger Icon

bootstrap-grid

bootstrap-5

bootstrap-icons