不同的材质图标样式不对齐

Posted 2023-02-22

【中文标题】不同的材质图标样式不对齐

【英文标题】：Different Material Icons styles do not align

【发布时间】：2019-10-03 21:42:00

【问题描述】：

我在我的应用中使用 Google 的 Material Design Icons。目前至少需要两种样式：常规（填充）图标和轮廓图标。问题是，这两种样式不对齐！

如果您查看此输出，则会发现常规图标和轮廓图标位于不同的高度，原因不明。通过在检查器中检查它们，您可以看到边界框确实不同（对于轮廓图标，它们似乎低于所需）。

.icon 
  vertical-align: middle;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<i class="icon material-icons">person</i>
<i class="icon material-icons-outlined">person</i>
<i class="icon material-icons">home</i>
<i class="icon material-icons-outlined">home</i>

是否有一种解决方法可以一次性应用于.material-icons-outlined 类以确保它们在任何地方都正确定位？

margin-bottom: -1em 适用于基本情况，但图标用于许多不同的上下文，有时（例如，当他们的父母需要缩小到他们的行高时）这个解决方案会失败。​​

或者，有没有一种工具可以快速修复字体并使其字符出现在所需的高度？

更新：这似乎只是我的 Windows 8.1 上的问题。图标在 Windows 10 上对齐。这可以在任何浏览器中重现。

UPDATE(2)：也就是说，两种字体之间显然存在一些差异。轮廓图标在较旧的 ios 版本上不起作用（仅显示其名称而不是图标），而常规图标则可以完美运行。

【问题讨论】：

似乎在 sn-p 中对齐？

@Pete 哎呀！似乎只能在我的电脑（Windows 8.1）上重现。在 Windows 10 上，它们是对齐的。

可能需要升级 - windows 去年停止了对 8.1 的主流支持

@Pete 我们的一些用户仍然安装了 Windows 8（或 8.1）。虽然这不是一个很大的比例，但最好让网站对他们来说也没有损坏。

【参考方案1】：

您可以使用 flex（甚至网格）将它们居中对齐。

.icon-wrapper 
  display: flex;
  align-items: center;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<div class="icon-wrapper">
  <i class="icon material-icons">person</i>
  <i class="icon material-icons-outlined">person</i>
  <i class="icon material-icons">home</i>
  <i class="icon material-icons-outlined">home</i>
</div>