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;
}

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

Answer 2

看起来有些类可以“增加相对于容器的图标大小”：

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

更多deets：http://fortawesome.github.io/Font-Awesome/examples/#larger

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

2 个答案: