时间戳

首页 > 解决方案 > 谷歌图标不是二次的，代码不起作用

html - 谷歌图标不是二次的，代码不起作用

问题描述

所以我在我正在写的网站上使用谷歌图标，我有两个问题：

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

对于不支持连字的浏览器，回退到使用数字字符引用指定图标

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

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

2.问题示例

正如您所看到的，当检查时，加号下方的空间比它上方的空间多，这使得按钮不像我想要的那样是二次方的。我已经尝试将 line height 属性更改为 1，虽然这确实减少了底部的空间，但仍然不均匀。而且我什至没有在其他任何地方设置行高，所以我很惊讶它有任何效果，因为我认为 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>

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

标签： htmlcssgoogle-font-api

解决方案

要将元素设置为正方形，您可以使用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>

推荐阅读