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

Posted 2021-03-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了结合图标如何在材料图标中工作？相关的知识，希望对你有一定的参考价值。

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

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

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

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

答案

说明

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

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

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

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

'常规'十六进制代码：&#xxxx;
或替代/别名/连字名称：ligature-name or alias

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

EXTRAS

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

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

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

另一答案

材料图标。可以在字体中为字符组合定义特殊字形。英语中的一个例子是字形æ，它是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>.

另一答案

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

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

另一答案

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

然后添加带有图标名称的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

另一答案

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

RUN CODE SNIPPET

以上是关于结合图标如何在材料图标中工作？的主要内容，如果未能解决你的问题，请参考以下文章

如何让`：after`在extjs iconCls中工作？

Font Awesome 不能在 Router Link Vue.js 中工作（可能的 Vue-Router 错误）

如何将上传图标修复为文件上传输入（材料 UI）

如何确保导出的 Eclipse RCP 应用程序在 MAC 中工作。

如何让带有渐变的矢量可绘制对象在 < API 24 中工作？

Anaconda 中的 FileChooserDialog 图标坏了如何修复？