浏览器支持连字图标

简短的回答：

1. 这是通过连接来自 Google 的字符字体完成的

   来自 Google 的简短注释：
   该字体提供了大号和小号字符的可读性和清晰度。这些图标经过优化，在所有常见平台和显示分辨率上看起来都很漂亮。

2. 所有现代浏览器都支持。支持IE以IE10.

字符字体的浏览器支持表。

详细说明：

这一切都始于2012年。

开发人员github.com决定提高他们的服务性能，并用他们的标准字体之一替换许多不同的图标字体Octicons，这将满足他们所有的图标显示需求。你可以在这里
下载字体

2013年3月，alistapart门户发布分析文章——
符号字体时代

其中作者谈到了使用字符字体的优点和一些缺点。该文章的作者写道，所有浏览器都支持作为矢量图像的字体，直到 IE6。

我翻译了文章的最后部分，我提前为免费翻译道歉

字体问题

任何优秀的设计师都会告诉你，一个图标或标志对于不同的字体大小会有细微的设计差异，比如改变线条的粗细，甚至在小尺寸时减少一些细节。
但是，对于字符字体，您无法为不同的字体大小创建替代字体。

如果在更改字体大小时需要不同的图像，则需要在字体文件中复制图标并根据使用情况选择适当的字形。

这也是有问题的，因为您不知道最终用户将如何实际查看您的设计。在他们的浏览器中增加字体大小最初不会改变符号的设计。

对于我们大多数人来说，这不是问题，因为我们今天用于提要和社交网络的许多图标对我们来说都比较熟悉。

使用字符字体的另一个主要问题是您只能获得一种颜色。您可以使用一些具有背景颜色和字体渐变的魔法来模拟双色徽标，但如果您的图标是多色的，那么当前的字符字体设置将不适合您。

为了解决这个问题，Apple 提供了多色字体，可让您在任何网页上创建和嵌入干净的矢量图形。

这方面的第一个尝试是Apple Color Emoji 字体，如果您的计算机正在运行，您可能已经拥有它OSX Lion

谷歌材质图标

Google 已经将字体的想法变为现实，并创建了他们的字体svg 图标，其中包括 900 张图像。

字体连接：

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

您可以在此处按名称选择图标 （请参阅更新）

使用 Google 字符字体的示例：

将鼠标悬停在图标上

i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i:hover {
  transform: scale(10);
}

.red{color:red}
.green{color:yellowgreen}
.blue{color: dodgerblue}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons red">settings</i> 
<i class="material-icons green">android</i>
<i class="material-icons blue">stars</i> 

FF、Chrome、Opera、IE11 测试。
不幸的是，我无法在旧版本的 IE 和 Safari 上测试性能

2018 年 1 月 27 日更新

• 例如，对于具有多字名称的字符字体图标
• note add单独的单词必须用下划线连接。note_add
• 也可以支持旧版本的 IE：IE9 及以下。为此，请在字体表中选择所需的图标，然后单击ICON FONT并获取插入示例：

<!-- For IE9 or below. --> <i class="material-icons">&#xE90A;</i>

下面是现代浏览器和旧版本的组合示例IE

i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i:hover {
  transform: scale(10);
}

.red{color:red;}
.green{color:yellowgreen;}
.blue{color: dodgerblue;}
.grey{color: grey;}

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

<i class="material-icons red">note_add</i> 

<!-- For modern browsers. -->
<i class="material-icons grey">offline_pin</i>
<!-- For IE9 or below. -->
<i class="material-icons">&#xE90A;</i>

<i class="material-icons blue">speaker_notes</i>

相关示例：

使用 CSS 绘制复选框