Html 跨覆盖元素位置错误

在我的网站（）上，我在图像上有此覆盖，但图标没有正确对齐，如您在此处所见：

这是一个基于Wordpress的博客，有一个主题，如果我查看主题的预览（）元素的位置是正确的：

我比较了html和css，它们看起来和我一样。标记使用带有伪before元素的span来呈现图标。我找不到问题的根源

代码如下：

<div class="post-thumbnail">
    <a href="http://milesopedia.com/conseils/ou-partir/partir-a-nouvelle-orleans-points-miles" rel="bookmark">
        <img width="310" height="165" src="http://i1.wp.com/milesopedia.com/wp-content/uploads/2016/05/Canal_Streetcar_in_New_Orleans_Louisiana_USA.jpg?resize=310%2C165" class="attachment-tie-medium size-tie-medium wp-post-image" alt="Photo: Didier Moïse">                                
        <span class="fa overlay-icon"></span> 
    </a> 
</div>    

---

重写从

font awesome.css继承的此规则：

.fa {
    transform: translate(0, 0);
}

我刚刚尝试在inspector中禁用它，图标如您所料居中

UPD:
或者，根据@jacob answer，有一种更干净的方法，只需为图标
span
元素设置
display:inline
。
覆盖从
font awesome.css
继承的此规则：

.fa {
    transform: translate(0, 0);
}

我刚刚尝试在inspector中禁用它，图标如您所料居中

UPD:
或者，根据@jacob answer，有一种更干净的方法，只需为图标
span
元素设置
display:inline
用于该
元素。
设置
显示：内联用于该
元素。
寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是在一个文本中。See在我看来似乎是一个定位问题。刚刚注意到，您的
img
元素未正确关闭（应该是这样的：
寻求代码帮助的问题必须包含在问题本身中复制它所需的最短代码，最好是在a中。但是，请参阅，在我看来这是一个定位问题。刚才注意到，您的
img
元素没有正确关闭（应该是这样的：