iPhone浏览器上显示的自定义字体图标不正确，但在任何桌面上都显示正常

Question

我创建了一些自定义字体图标，无论响应大小如何，它们在桌面上看起来都很棒。图标是第二个和第三个。

但是，在Chrome和Safari上的iPhone上，它们看起来像这样：

有什么线索的原因？我似乎无法修复它。页面位置在这里：Website Address

Answer 1

您必须移除顶部填充并增加移动媒体查询的高度，例如

body.event .social-icons .btn.btn-aau
{
  padding:0;
  height:28px;
}

Answer 2

这是因为我的字体没有对齐为字形。由于某些原因，Illustrator to fontastic.me并没有很好地工作所以我使用了Icon Moon并将图标移动到了正确的位置。修复可以在下面的链接中找到。

Answer