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

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

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

---

有什么线索吗？我似乎无法修复它。页面位置如下：

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

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

---

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

---

那只会弄乱我的桌面版本。我不相信这与按钮有关，因为如果我只使用了按钮，它在我的表格页面的按钮之外也会做同样的事情。你可以将它写在@media（最大宽度：767px）{}下，这样只会在iphone或显示器小于767px的设备上生效