如何使用纯 CSS 使用带有图标的按钮？

使用纯 CSS 将图标字体与纯按钮合并是一项简单的任务。由于 Pure CSS 没有自带图标包，我们使用的是来自 Font Awesome 的图标字体。

在首先创建带有图标的按钮之前，我们必须直接从 CDN 将 pure.css 文件包含到我们的 HTML 文件中。然后将 Font Awesome CSS 文件链接到您的页面。

示例 1：以下代码演示了使用各种纯 CSS 类的纯按钮。请参阅以下代码和输出图像中的注释以更好地理解。

HTML

    
    
  
    
    
  

  

     
GeeksforGeeks
       
Buttons using Pure CSS
  
     

    
        
            
            Phone
        
      
        
            
            Message
        
          

  

输出：

示例 2：以下示例演示了使用 Pure CSS 类的其他按钮。开发人员可以开发自己的自定义按钮，例如成功按钮，如下所示。

HTML

  
    
    
  
    
    
  
    
  
  
  
    
GeeksforGeeks
    Buttons using Pure CSS
  
    

    
       Fire Work
    
  
    
       Lightning
    
  

输出：