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

Question

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

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

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

如果由于add字词与字体文件中的加号图标相关联，那么为什么Bootstrap中的Glyphicons以及{{3} }}？

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

Answer 1

说明

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

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

一个或多个别名/替代名称是＆＃39; 连字＆＃39;你指的是并驻留在字体文件中。

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

• ＆＃39;常规＆＃39;十六进制代码：<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，选择一个图标，然后选择生成字体＆＃39; （右下）
• 使用＆＃39; show ligatures＆＃39; -button（左上角第3个按钮）启用连字的显示

Answer 2

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

让我们退一步。您会注意到，在使用 add 图标时，可以直接使用以字体映射到正确图标的字符代码来包含它。

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

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

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

Google非常简短地记录as well。

简而言之：使用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>.

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

为什么在span中使用+不起作用？这是因为在CSS中转义Unicode字符与在HTML中转义不同。在HTML中，您可以使用€代替（或Glyphicons Halflings来获取您在问题中的示例）。您可以阅读有关转义plus sign的更多信息。

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

{{1}}

Answer 3

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

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

Answer 4

是的，您可以使用材料<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