html - 在 Bootstrap 缩略图上覆盖 Font Awesome 图标

Question

我无法弄清楚如何将 Font Awesome 图标覆盖在 Bootstrap 缩略图上并使其正确缩放。

这是我的 Bootstrap 缩略图在没有 Font Awesome 图标的情况下的结构示例。

<div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="images/demoreel.png">
            </div>
        </div>

        <div class="col-md-4">
            <div class="thumbnail">
                <img src="images/soma.png">
            </div>

        </div>

        <div class="col-md-4">
           <div class="thumbnail">
                <img src="images/chomsky.png">
           </div>
        </div>

    </div>

Answer 1

我通过使用 CSS 定位元素并使它们的位置绝对化(允许它们与图像一起剪辑)，用字体超棒的图标覆盖图像。然后我使用 top: 50% 和 left: 50% 将 font awesome 图标居中放置在图像的中心。最后，我做了一些微调，通过调整边距使其完美居中。

.thumbnail i {
top: 50%;
left: 50%;
position: absolute;
margin-left: -25px;
margin-top: -30px;
}

这对于将图像居中非常有效，因为即使图像因调整浏览器窗口的大小而放大，它仍然保持居中。但是，我无法让它粘在图像的一 Angular ，即使在放大后也无法停留在那里。