Google 图标不是二次方的，代码也不起作用

Question

所以我在我写的网站上使用 Google Icons，但我有两个问题：

正如文档中所说 here，您可以使用具有正确 class 的 span 元素，并将图标名称放入其中，它会起作用。这很好，但由于它显然不适用于所有浏览器，我想尝试提到的另一种方法：

For browsers that do not support ligatures, fall back to specifying the icons using numeric character references

但是，我不明白这些数字字符引用是如何工作的。我试过 &#xxxx; 就像在示例中一样，使用每个图标的“代码点”下给出的代码代替 x，但这不起作用。我做错了什么？

我遇到的第二个问题是我为按钮使用了一个图标（连字方式，因为这是我唯一需要工作的方式），而且它不是二次方的。按钮和图标 class 除了颜色变化外没有应用任何特殊样式，但由于某种原因，按钮的内容比它的宽度高得多（24 x 29.xxx 如果我没记错的话，字体大小为 24 像素）。按钮内的跨度是24 x 24，但按钮内容不是。

如您所见，在检查时，加号下方的 space 比其上方多一些，这使得按钮不像我希望的那样是二次方的。我已经尝试将行高属性更改为 1，虽然这确实减少了底部的 space，但仍然不均匀。而且我什至没有在其他任何地方设置行高，所以我很惊讶它有任何效果，因为我认为 1 是标准的。

button {
    line-height: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
</head>
<body>
    <button type="button">
        <span class="material-icons">add</span>
    </button>
</body>
</html>

只需突出显示按钮文本，您就会看到它。

Answer 1

要使元素成为正方形，您可以使用 aspect-ratio: 1 / 1;
要使按钮内的图标居中，您可以使用 flexbox：

/* makes the button square */
button {
  aspect-ratio: 1/1;
}

/* cenetrs the icon horizontally and vertically */
button {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<!-- Body -->
<button type="button">
  <span class="material-icons">add</span>
</button>

Answer 2

@tacoshy 的回答似乎涵盖了你问题的第一部分。

对于第二部分 - 使用图标名称中的代码 - 您需要完全使用 google 文档中给出的布局。请注意，它们在 # 之后有一个 x - 这向 HTML 'special characters' 系统（即以 & 符号开头）表明以下代码是十六进制的。

所以对于加号你需要使用：

Google 图标不是二次方的，代码也不起作用

Google Icons not quadratic, and codes don't work

html

css

google-font-api