如何在多张图片上显示fontwo敬畏的图标

how to display fontawesome icon on multiple images?

本文关键字：fontwo 图标 显示 张图片      更新时间：2023-09-26

因此，我试图实现的是，我想在多个图像上添加共享图标，其中每个图像都有不同的链接。然而，就图标而言，我希望它位于所有图像的中心。下面是我的代码示例。如有任何帮助，我们将不胜感激。的链接http://jsfiddle.net/nhxjvmhh/

HTML

<div class="movieicon">
    <a href="v/link">
        <img src="https://lh3.googleusercontent.com/-l2d24l8Zir4/Txh8bYhN6rI/AAAAAAAAC3s/lWtdZuBS-bc/w500-h350-no/24.gif" width=300 height=180 />
    <span  class="fa fa-share-square-o"></span>
    </a>
</div>

CSS

.fa-share-square-o:hover {
    color:#4099FF;
}
.fa-share-square-o{
    color: #cccccc;
    font-size: 50px;
}

一种方法是绝对定位图标相对于父元素。

使用text-align: center进行水平居中，使用top: 50%/transform: translateY(-50%)进行垂直居中。

更新示例

.movieicon {
    position: relative;
    display: inline-block;
}
.movieicon a {
    display: block;
}
.movieicon .fa-share-square-o {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}
相关文章：