幽灵图标

在文档中，它被称为 Icons.css。 Icon.css 是一个单一元素，是响应式的纯 CSS 图标，有 Spectre 对象图标、动作图标和导航图标三种类型的图标。所有的图标都可以有不同的大小，有三种不同的大小，比如它可以大 2 倍、大 3 倍或大 4 倍，因为我们需要使用 Spectre 图标大小。

幽灵图标类型：

• 幽灵对象图标： 这用于包含对象图标。
• 幽灵行动图标： 这用于包含操作图标。
• 幽灵导航图标： 这用于包含导航图标。

注意：还有一个东西图标是第一段中描述的大小。

幽灵图标类：

• 图标：这个类是必须使用幽灵添加任何图标。

句法：

HTML


  

    
    
    
    

  

    
        
GeeksforGeeks
        SPECTRE Object Size icons Class
        


        

            Mail icon:
            
             
            
            People icon 2x:
            
             
            
            Message icon 3x:
            
            
            
            Photo icon 4x:
            
            
            
        
    

  

输出：

幽灵图标

示例 2：在此示例中，我们将创建 4 个不同大小的操作按钮。

HTML

  

    
    
    
    

  

    
        
GeeksforGeeks
        SPECTRE Action Size icons Class
        


        

            Stop icon:
            
             
            
            Shutdown icon 2x:
            
             
            
            Refresh icon 3x:
            
            
            
            Search icon 4x:
            
            
            
        
    

  

输出：

幽灵图标

示例 3：在此示例中，我们将创建 4 个不同大小的导航按钮。

HTML

  

    
    
    
    

  

    
        
GeeksforGeeks
        SPECTRE Navigation Size icons Class
        


        

            Downward icon:
            
             
            
            Caret icon 2x:
            
             
            
            Menu icon 3x:
            
            
            
            Apps icon 4x:
            
            
            
        
    

  

输出：

幽灵图标

参考： https://picturepan2.github.io/spectre/elements/icons.html