材料图标中的结扎图标如何工作？ [英] How do ligature icons work in Material Icons?

问题描述

使用材料图标，

 < i class =ci_add =noreferrer> plus icon 材料图标>添加< / I> 
  

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

如果是由于加上加字体文件中的图标，那么为什么以下工作不在 Bootstrap 中，其 Glyphicons ？

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

解决方案

说明

当你去除所有的技术信息时，答案真的很简单，字体文件包含了几个表格：

• [MANDATORY] 字符列表


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

$ b 一个或多个别名/替代名称是指您所指的字体文件中的连字符。

从本质上讲，当使用连字字体文件中的字符/图标时，我们可以使用

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

  这可能是所有重要信息，供网页设计人员知道。

  
  
  

  ---

  
  
  

  EXTRAS

  
  
  

  转到 CSS-Tricks：结扎图标如何工作... 以查看使用示例和简要解释。

  
  
  

  如果您想要弄脏我建议你开始使用 IcoMoon APP ：

  
  
  
  
  
  • 启动APP，选择一个图标，然后选择生成字体（右下）
    
  • 启用显示连字符'show ligatures'按钮（左上角的第三个按钮）
    
    

    Using Material Icons, a plus icon can be added as follows:

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

    The text add is no longer visible. Why does this happen and where does the plus icon come from? I know it's defined in the font file, but how?

    If it's due to the word add linked with the plus icon in the font file, then why doesn't the following work in Bootstrap, with its Glyphicons?

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

    解决方案

    EXPLANATION

    When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:

    • [MANDATORY] the list of characters
    • [MANDATORY] the hexadecimal codes of those characters
    • [OPTIONAL] one or more aliases/alternative names for those characters

    The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.

    Essentially, when using a character/icon from a font file with ligatures, we have the option to use

    • the 'regular' hexadecimal code: <i class="some-font-with-ligatures">&#xxxx;</i>
    • or the alternative/alias/ligature name: <i class="some-font-with-ligatures">ligature-name or alias</i>

    That is probably all the important info for a web designer to know.

    ---

    EXTRAS

    Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.

    And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:

    • start the APP, select an icon and select 'generate font' (bottom right)
    • Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)

    这篇关于材料图标中的结扎图标如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！