如何在多个图像上显示fontawesome图标？

Question

所以我想要完成的是我想在多个图像上添加共享图标，其中每个图像将具有不同的链接但是，只要图标去我希望它在所有图像的中心下面是样本我的代码任何帮助将不胜感激谢谢。 链接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; 
} 

Answer 1

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

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

Updated Example

.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%); 
}