在CSS / JavaScript中，这个图标/字体插件如何实现？ [英] In CSS/JavaScript, how is this icon/font plugin implemented?

问题描述

在Jsfiddle演示

http：// jsfiddle。 net / hc046u9u /

 < link href = ：//fonts.googleapis.com/icon？family = Material +图标rel =stylesheet>< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/materialize /0.97.0/css/materialize.min.css\"> ;<script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< ; / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js>< / script>< i class = material-icons> add< / i>< i class =material-icons> replay< / i>   
 
 
 
最让我困惑的是图标不是由类属性实现的（如< i class =icon-add> < / i> ），但由  <$ c $> 
 
 
 
当我查看< i> 节点在chrome开发者工具中，它们看起来几乎相同，似乎无法区分CSS选择器。
 
 
 
 img src =https://i.stack.imgur.com/XGRrY.pngalt =在这里输入图片说明> 
 
 
 
如果图示是由内部文本，CSS如何为这些< i> 节点分配不同的图标？
 
 
 
无法理解这些图标是如何实现的（图标字体， PNG 或 SVG ）。看起来它们是由图标字体，实现的，但我找不到任何CSS声明如：
  .fa-flag：before {
 content：\f024; 
} 
  
如果图标不是由：before 
解决方案
  div> 
这是一个把戏，其中图标实现为字体中的组合字形。这意味着字母组合添加和重放被显示为字体中的一个字符，类似于fi和fl经常被表示为许多字体中的一个字符。 （有关详细信息，请参阅此维基百科文章。）因此，图标不是来自CSS声明。
 
 
 
如果你将字体应用到输入字段，你可以看到它是如何工作的：如果你开始随机输入，你看不到任何东西，因为单个字符没有分配给他们的字形，但如果你键入添加，你会看到一个+符号出现。
 
 
 
 
 
 
 < link href =https：// fonts。 googleapis.com/icon?family=Material+Iconsrel =stylesheet>< textarea class =material-icons> add remove replay< / textarea>  
 
 
 
 
Demo at Jsfiddle

http://jsfiddle.net/hc046u9u/



<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>

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





What confused me the most is the icons are not implemented by class attribute (like <i class="icon-add"></i> or <i class="icon-reply"></i>), but by the inner text of the <i> node.

When I view the <i> node in the developer tool of chrome, they look almost the same and seem indistinguishable for CSS selector.



If the icon is set by the inner text, how could CSS asign different icons for these <i> nodes?

Another thing that I could not understand is how these icons are implemented (icon font, PNG or SVG). It seems that they are implemented by icon font, but I can't find any CSS declaration like:
.fa-flag:before {
  content: "\f024";
}
If the icons is not implemented by the :before selector and content attribute, how are they implemented?
解决方案
It's a "trick" where the icons are implemented as composed glyphs in the font. It means that letter combinations "add" and "replay" are displayed as one character in the font, similar to how "fi" and "fl" are often represented as one character in many fonts. (See this Wikipedia article for more information.) The icons therefore don't come from CSS declarations.

You can see how it works if you apply the font to an input field: if you start typing randomly, you don't see anything because individual characters don't have a glyph assigned to them, but if you type "add" you'll see a + symbol appear.



<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<textarea class="material-icons">add remove replay</textarea>





                        
这篇关于在CSS / JavaScript中，这个图标/字体插件如何实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！