带图标的入门 CSS 警报

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

在本文中，我们将讨论带有图标的 Primer CSS Alerts。 Primer CSS Alerts 带有图标，可在 Flash 消息的左侧添加图标。它提供了时髦的新鲜关注。

示例 1：在此示例中，我们将使用带有警报的 SVG 图标。我们将创建不同的 SVG 图标，例如警告。

HTML

  

        

  

    
GeeksforGeeks
    
 Alert With Icons
      
      

        
        
        Hi Geek!! I am an informative Alert
    
  
    

        
        
        Hi Geek!! I am an warning Alert
    
   

输出：

示例 2：在此示例中，我们将使用 CSS 图标作为警报中的图标。我们将使用图标显示两种类型的警报，即错误和成功

HTML

  

    
    

  

    

        
GeeksforGeeks
        
 Alert With Icons
    
    

        
         Hi Geek!! I am an Success Alert
    
    

        
        
        Hi Geek!! I am an Error Alert
    
   

输出：

参考： https://primer.style/css/components/alerts#with-icon