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

Question

使用材质图标,可以添加加号图标,如下所示:

<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:结扎图标如何工作...查看用法示例和简要说明.

如果您想要使用自己的图标字体文件,我建议您开始使用IcoMoon APP:

• 启动APP,选择一个图标并选择"生成字体"(右下角)
• 使用"show ligatures"按钮启用连字显示(左上角第3个按钮)

Answer 2

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

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

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

这是指 Unicode字符U + E145,它位于Unicode规范的一个专用区域块中.这意味着通常不会为此位置分配字符,并且每个字体设计者都可以自由地在该位置放置任何字形.谷歌选择将添加图标放在该位置.因此,具有字体系列的此字符Material Icons将呈现为一个漂亮的图标.

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

谷歌很简单记录了这个以及.

简而言之:(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所做的,通过设置(来自Glyphicons的加号图标)content: "\002b";.此设置内容的的span它被施加在由表示的字符转义码点 U + 002B,这是加号.该Glyphicons Halflings字体系列呈现此为某种图标,就像Material Icons.唯一的区别是图标由不同的字符表示.

你问为什么\002B在span不工作中使用？这是因为在CSS中转义Unicode字符与在HTML中转义不同.在HTML中,您可以使用+(或者€获取您在问题中的示例).您可以在此处阅读有关逃避的更多信息.

因此,+(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>