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

Question

我无法弄清楚如何在Bootstrap缩略图图像上叠加Font Awesome图标并使其正确缩放.

这是我的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%左边:50%将字体真棒图标置于图像中心上方.最后,我做了一些微调,通过调整边距使其完美居中.

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

这对于图像居中非常有效,因为即使图像从重新调整浏览器窗口大小放大,它仍然保持居中.但是,我不能让它坚持在图像的角落,即使在放大后仍然留在那里.