iPhone 5+中的图标定位，桌面和其他移动设备上的图标很好

Question

我有一个图标附加到：span之前，因此：

<div class="user">
    <a href="/Account/SignIn?returnUrl=%2FSearch%3FcategoryId%3DAll%2BProducts%26criteria%3Dbike">
        <span class="fa fa-user"></span>
    </a>
</div>

span.fa-user:before {
  color: #40bf40;
  font-size: 28px;
  position: absolute;
  top: 6px;
  left: -7px;
}
.fa-user:before {
  content: "\f007";
}
.top-bar .user {
  float: right;
  background-color: #3f4651;
  top: 5px;
  position: absolute;
  right: 55px;
  bottom: 5px;
  width: 40px;
}
nav ul:not(.side-nav) li a {
  padding: 0 16px;
}

这是它在桌面和Android（绿色用户图标）中的外观：

但是在iPhone上，图标定位错误：

为什么iPhone上的定位会出错？

编辑：我添加了周围的HTML和样式和css