Html 如何在两个引导列之间放置图标？

我想在同一行的两个引导列之间放置一个居中的图标？各列为第6列，不能更改。我希望此图标始终位于手机和桌面上的两列之间。我如何才能做到这一点

<a class="row bg-light" href="#">
    <div class="col-lg-6 ">
        <!-- stuff -->
    </div>

    I want an Icon here like: <i class="fa-bla"></i>

    <div class="col-lg-6 ">
        <!-- stuff -->
    </div>
</a>

---

如果您没有找到更好的解决方案，我会尝试使用：

显示：网格；
网格模板列：45%5%45%；

（或者，无论您需要怎样的尺寸来填充页面）

然后可能会调整图标以将其置于中心位置：

显示：flex；
证明内容：中心；
对齐项目：居中；

---

在Bootstrap中更改col-X也会起作用，但您说过它们不能更改，所以。。。不过，我还是希望你能让它发挥作用。

使用CSS，你可以做如下事情：

<a class="row bg-light" href="#">
    <div class="col-lg-6 has-icon">
        <!-- stuff -->
        <i class="fa-bla"></i>
    </div>
    <div class="col-lg-6">
        <!-- stuff -->
    </div>
</a>

.has-icon {
    position: relative;
}
.has-icon i {
    position: absolute;
    top: 50%;
    margin-top: -10px; // half of the icon's height 
    left: -10px; // will need adjusting to preference
}

.有图标{
位置：相对位置；
}
.有图标i{
位置：绝对位置；
最高：50%；
页边距顶部：-10px；//图标高度的一半
左：-10px；//需要根据偏好进行调整
}

---

您还需要考虑当列在较小的设备上崩溃时重新定位，因此使用媒体查询并将图标放置到第一列的底部。

< P>可以通过使用Unicode直接从CSS调用字体很棒。如果给

div

一个

id

，可以在

之后使用
：：添加如下图标：


#stuff:：after{
字体系列：“FontAwesome”；
内容：“\f007”；
垂直对齐：中间对齐；
}

可能需要一个css解决方案，在这个解决方案中，您尽可能多地利用
位置
，也许您可以建议一个css实现？@Java\u Man，也许您可以发布一个关于您的问题的MVCE示例，以及相关的HTML和css标记。然后，我们可以看到你正在使用什么样的图标，你想要它在哪里，等等。添加了一些html