纯 CSS 按钮图标

按钮是最常见的 UI 元素之一。它们使用户可以与系统交互并通过选择来采取行动。为了使按钮更加用户友好，我们可以在按钮上放置图标。纯 CSS 不附带图标，有很多图标包可以在纯 CSS 中使用。在本文中，我们将使用字体真棒图标。要在按钮上包含图标，请在按钮元素的纯按钮类中使用 元素。

纯 CSS 按钮图标类：没有预定义的图标类，您可以将 font awesome 图标放在按钮元素之间，就像我们以前放在普通 html 中一样

Font Awesome Icons： Font-awesome 是一个 Web 图标库，为您提供可缩放的矢量图标，可以根据颜色、大小和更多方面进行自定义。

  https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

句法：

    
    ...

注意：要了解更多关于纯 CSS 图标和纯 CSS 按钮的信息，请点击链接文章。

例子：

HTML

    
    
    

  

    
    
Geeksforgeeks
    Pure CSS Button Icons
    


      
    
        
        Fire Alarm
    
    
        
        Trash
    

---

输出：

纯 CSS 按钮图标