带图标的入门 CSS 框

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Primer CSS Box用于在简单的圆角框中显示内容。 Primer CSS Boxes with Icons用于在框中添加带有内容的图标。我们使用Box-btn-octicon和btn-octicon类具有与其他框元素相同的填充。在本文中，我们将讨论带有图标的 Primer CSS Boxes。

带图标类的入门 CSS 框：

• Box-btn-octicon：该类用于创建图标按钮。
• ocicon：这个类用于创建 ocicon。

句法：

  

     ... 
    
          ...
    
  

示例 1：以下代码演示了带有图标的 Primer CSS 框。

HTML

  

  
  

  

    

      
 GeeksforGeeks 
      
 Primer CSS Boxes with Icons 
    
 
 

  
    

        

            
              GeeksforGeeks
            
            
                
            
        
    

  

输出：

带图标的入门 CSS 框

示例 2：以下代码演示了带有图标的 Primer CSS 框。

HTML

  

    
    

  

    

        
 GeeksforGeeks 
        
 Primer CSS Boxes with Icons 
    
 
 

  
    

        

            
                
            
            
                GeeksforGeeks
            
        
  
        

            
            
                
            
        
    

  

输出：

带图标的入门 CSS 框

参考： https://primer.style/css/components/box#boxes-with-icons