基础 CSS 徽章图标

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

徽章是用于显示指标或统计数字（即未读项目数）的基本组件。它有助于将直接父元素的大小与相对字体大小相匹配。 Foundation CSS 通常使用带有 元素的.badge类来创建徽章。

图标是图形符号，每个都带有特殊含义并用于特定目的。为了使用图标类，请在 标记中使用“ fa ”后跟图标名称来声明该类。

基础 CSS 徽章图标类：

• badge ：此类用于创建要添加到元素的徽章。
• fi-iconname*：该类用于根据使用的类指定要显示的特定图标。

句法：

有关其他图标类的详细说明，请参阅基础图标页面。

示例 1：这是一个基本示例，说明 Foundation CSS 中的徽章图标。

HTML

  

    
      
    
    
     

  

    
        
GeeksforGeeks
 
        Foundation CSS Badge Icons
        
 
        
            
         
        
            
        
        
            
         
        
            
         
        
            
         
        
            
         
        
            
         
        
            
        
        
            
         
        
            
         
    

---

输出：

示例 2：这是一个基本示例，说明了 Foundation CSS 中的彩色徽章图标。

HTML

  

    
      
    
    
    

  

    
        
GeeksforGeeks
 
        Foundation CSS Badge Icons
        
 
        
            
        
        
            
         
        
            
         
        
            
        
        
            
         
        
            
         
        
            
         
        
            
         
        
            
         
        
            
         
    

输出：

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