基础 CSS 菜单图标

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒，并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Foundation CSS 中的菜单是一个导航列表，其中包含重定向到网站或 Web 应用程序中各种链接页面的不同组件。

我们所知道的图标是具有特殊含义和特殊用途的符号。可以使用图标代替文本。

基础 CSS 菜单图标类：

• menu：该类用于创建导航菜单。
• 图标：此类指定菜单包含图标
• icon-right：此类指定图标位于菜单文本的右侧。
• icon-left：此类指定图标位于菜单文本的左侧。
• icon-top：此类指定图标位于菜单文本的顶部。
• icon-bottom：此类指定图标位于菜单文本的底部。
• vertical：该类用于创建垂直对齐的菜单。
• 嵌套：该类用于创建嵌套菜单。
• fi-list：该类用于创建列表图标。
• fi-minus：该类用于创建减号图标。

句法：

   
....
   ....

示例 1：这是一个基本示例，说明了使用 Foundation CSS 创建的菜单图标的不同方向。

HTML

  

    Foundation CSS Menu Icons
    
    
    
    
    
    
    
    
  
    
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    

  

    
        GeeksforGeeks
    
      
    Foundation CSS Menu Icons
    
  
    Icon Top
    
        
                Data Structures
            
        
        
                
                Algorithms
            
        
        
                
                Interview Preparation
            
        
    
    Icon Bottom
    
        Data Structures
                
        Algorithms
                
        Interview Preparation
                
    
    Icon Left
    
        
                
                Data Structures
        
         
                Algorithms
        
                Interview Preparation
        
    
    Icon Right
    
        Data Structures
                
        Algorithms
                
        Interview Preparation
                
    
  
    
        $(document).foundation();
    

  

输出：

示例 2：这是一个基本示例，说明使用 Foundation CSS 创建的嵌套菜单图标。

HTML

  

    Foundation CSS Menu Icons
    
    
    
    
    
    
    
    
  
    
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    

  

    
        GeeksforGeeks
    
      
    Foundation CSS Menu Icons
    
  
    
        
                Data Structures
        
            Linked List
                    
            Stacks
                    
            Queues
                    
        
        
                Algorithms
        
            
                    Binary Search
            
                    Merge Sort
            
                    Dijkstra Algorithm
        
        
                Interview Preparation
    
  
    
        $(document).foundation();
    

  

输出：

参考： https://get.foundation/sites/docs/menu.html#icons