解释
当你剥离所有的技术信息，答案真的很简单，字体文件包含几个表格，其中：

***[MANDATORY]**字符列表
***[MANDATORY]**这些字符的十六进制代码
*[可选]这些字符的一个或多个别名/替代名称
一个或多个别名/替代名称是您要引用的“连字”，它们位于字体文件中。

实际上，当使用带有连字的字体文件中的字符/图标时，我们可以选择使用

• “常规”十六进制代码：<i class="some-font-with-ligatures">&#xxxx;</i>
• 或替代/别名/连字名称：<i class="some-font-with-ligatures">ligature-name or alias</i>

这可能是所有的重要信息为网页设计师知道。

额外

转到CSS-Tricks: How do ligature icons work...查看用法示例和简要说明。
如果你想用你自己的图标字体文件，我建议你开始使用IcoMoon APP：

• 启动APP，选择图标，然后选择“生成字体”（右下角）
• 使用“显示连字”按钮（左上方第三个按钮）启用连字显示

**材质图标。**在字体中可以定义特殊的字形 * 字符组合 *。英语中的一个例子是字形 æ，它是 a 和 e 的组合。这被称为ligature。其他的例子是ff、ft和tt的特殊渲染。这两个字形被绘制为一个连接的字形，而不是一个f接着一个f：f  f vs ff. Material Icons集的设计者所做的是（ab）使用这个系统使图标变得容易使用。

让我们退一步，你会注意到在使用 add 图标时，可以直接使用字符代码将其包含在字体中，该字符代码Map到正确的图标。

<i class="material-icons">&#xE145;</i>

将refers转换为Unicode字符U+E145，U +E145福尔斯Unicode规范的Private Use Area块之一。这意味着通常没有字符被分配到该位置，每个字体设计者都可以自由地在该位置放置他们想要的任何字形。Google选择将 add 图标放置在该位置。因此，该字符，字体系列为Material Icons，将呈现为漂亮的图标。
除此之外，他们在字体家族中创建了一个连字，表示字符组合 add 应该呈现为相同的字形。当浏览器在其字体呈现引擎中支持连字时，这将导致与使用&#xE145相同的输出。
Google也简要记录了这一点。
简而言之：当使用Material Icons时，（U+E145）和字符串 add 都将呈现为

。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
As character: <span class="material-icons">&#xE145;</span>.<br>
As ligature: <span class="material-icons">add</span>.

**Bootstrap和Glyphicons。**Glyphicons字体不定义连字，但引用正确的字符肯定有效。这正是Bootstrap所做的，通过设置（对于Glyphicons中的加号图标）content: "\002b";。span的sets the content应用于由escaped code point U+002B表示的字符，即plus sign。Glyphicons Halflings字体家族将其呈现为某种图标，就像Material Icons一样。唯一的区别是图标由不同的字符表示。

你会问，为什么在span中使用\002B不起作用？这是因为CSS中对Unicode字符的转义与HTML中的不同。在HTML中，你会使用+来代替（或者€来得到你问题中的例子）。你可以阅读更多关于转义here的内容。
因此，当使用Glyphicons Halflings字体家族时，+（U+002B）呈现为

，而€（U+20AC）呈现为

。你会注意到，对于字形图标，他们选择使用类似于图标的字符，而材质图标使用特殊的保留字符。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="font-family: 'Glyphicons Halflings'">&#x002B; &#x20AC;</span>