为什么我的文字Icon小图标会缺一点呢？

Question

网上显示的。

我自己的，网页上引用其他的没问题。虽然问题不大，但总感觉怪怪的。

<li>
   <s class="mail_icon icon"></s>
   <input type="email" required="required" placeholder="登录邮箱"class="email" >
 </li>

.entry li s {
  width: 22px;
  height: 22px;
  position: absolute;
  left: 10px;
  top: 10px;
 display: inline-block;
}
.icon {
  font-family: "mian_font";
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
}
.mail_icon:before {
  content: "";
  color: #000;
}