结合图标如何在材料图标中工作？

Question

使用Material Icons，可以添加plus icon如下：

<i class="material-icons">add</i>  

文字add不再可见。为什么会发生这种情况？加号图标来自何处？我知道它是在字体文件中定义的，但是怎么样？

如果是由于add这个词与字体文件中的加号图标相关联，那么为什么Bootstrap中的Glyphicons不能正常工作呢？

<span style="font-family: 'Glyphicons Halflings'">\20ac</span>

Answer 1

说明

当您删除所有技术信息时，答案非常简单，字体文件包含几个表格，其中包括：

• [MANDATORY]字符列表
• [MANDATORY]这些字符的十六进制代码
• [可选]这些字符的一个或多个别名/替代名称

一个或多个别名/替代名称是您引用的“连字”并驻留在字体文件中。

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

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

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

---

EXTRAS

请访问CSS-Tricks: How do ligature icons work...查看用法示例和简要说明。

如果你想搞乱你自己的图标字体文件，我建议你开始使用IcoMoon APP：

• 启动APP，选择一个图标并选择“生成字体”（右下角）
• 使用“show ligatures”按钮启用连字显示（左上角第3个按钮）

Answer 2

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

让我们退一步吧。您将注意到在添加图标的使用中，可以通过直接使用以字体映射到正确图标的字符代码来包含它。

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

这个refers到Unicode字符U + E145，它属于Unicode规范的Private Use Area块之一。这意味着通常不会为此位置分配字符，并且每个字体设计者都可以自由地在该位置放置任何字形。谷歌选择将添加图标放在该位置。因此，这个字符系列Material Icons的字符将呈现为一个漂亮的图标。

除此之外，他们还在其字体系列中创建了一个连字，表示字符add的组合应该呈现为相同的字形。当浏览器在其字体渲染引擎中支持连字时，这将导致与使用&#xE145相同的输出。

Google非常简短地记录了as well。

简而言之：当使用时，（U + E145）和字符串add将呈现为Material Icons。

<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>.

---

Boostrap和Glyphicons。 Glyphicons字体不定义连字，但引用正确的字符肯定会起作用。这正是Bootstrap所做的，由setting（来自Glyphicons的加号图标）content: "\002b";。这个sets the content的span它被应用于由escaped code point U + 002B代表的角色，即plus sign。 Glyphicons Halflings字体系列将其渲染为某种图标，就像Material Icons一样。唯一的区别是图标由不同的字符表示。

你问，为什么在\002B中使用span不起作用？这是因为在CSS中转义Unicode字符与在HTML中转义不同。在HTML中，您将使用+（或€来获取您在问题中的示例）。你可以阅读更多关于逃离here的信息。

因此，当使用字体系列时，+（U + 002B）呈现为，而€（U + 20AC）呈现为Glyphicons Halflings。您会注意到，对于Glyphicons，他们选择使用类似图标的字符，而Material Icons使用特殊的保留字符。

<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>

Answer 3

Here它声明“要使用这些图标，请在元素上使用material-icons类，并提供连字作为文本内容。” <i class="material-icons">add</i>中的添加是创造加号的原因。 <i>元素上的类告诉它应用css和你想要图标的大小。如果您检查this页面上图标的元素，那么您可以看到图标下方的单词来自他们放在旁边的<span>。

Bootstrap glyphicons附加到自己的类。 Here它声明“图标类只应用于不包含文本内容且没有子元素的元素。”所以bootstrap glyphicons要求元素为空。 Materialise和Bootstrap有不同的方法来访问它们的图标。 Bootstrap使用.glyphicon-asterisk{ &:before { content: "\002a"; } }并应用内容：before，而materialize则不然。它用正确的图标替换当前内容。

Answer 4

是的，你可以使用material<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">然后在你放置类<span class="material-icons"></span>的范围内

然后添加带有图标名称的CSS

.depth-1 > li.sub > a > span::after {
    content: 'arrow_drop_down'; 
}

.depth-1 > li.active.sub > a > span::after {
    content: 'arrow_drop_up'; 
}

----------

https://codepen.io/gusanofunx/pen/vpaqbP

Answer 5

此外，您可以考虑使用连字作为可点击的背景：

RUN CODE SNIPPET