纯 CSS 图标

在本文中，我们将学习如何在纯 CSS 中使用图标，并通过示例了解其实现。纯 CSS 没有任何图标组件，有很多图标包可以在纯 CSS 中使用。在所有这些图标包中，有 3 个最简单易用的图标包，如下所述：

• 字体真棒图标： Font-awesome 是一个 Web 图标库，为您提供可缩放的矢量图标，可以在颜色、大小和更多方面进行自定义。

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

• 谷歌材质图标： 图标可以从图标库添加到我们的 HTML 页面。库中的所有图标都可以使用 CSS 进行格式化。它们可以根据尺寸、颜色、阴影等进行定制。

https://fonts.googleapis.com/icon?family=Material+Icons

• 引导图标： Bootstrap 图标旨在与 Bootstrap 组件配合使用，从表单控件到导航。 Bootstrap 图标是 SVG，以便它们可以快速简单地扩展。

https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css

下面的示例将说明这些包与 Pure CSS 的使用。

示例 1：在此示例中，我们将为 3 个不同的包使用火图标。对于这 3 个包，这些图标具有不同的外观和不同的类。

示例：

HTML

  

    
  
    
    
    
    
    
  
    
    
    
    

  

    GeeksforGeeks
    Pure CSS Icon
  
    Font Awesome Icons
    
    
    Google Material Design Icons
    whatshot
    
    Bootstrap Icons
    

  

输出：

示例 2：此示例说明了纯 CSS 中按钮图标的使用。我们将使用我们上面使用的相同示例并在其上实现按钮图标。请参阅如何使用纯 CSS 的图标使用按钮？文章了解更多详情。

例子：

HTML

  

    
  
    
    
    
    
    
  
    
    
    
    

  

    GeeksforGeeks
    Pure CSS Icon
  
    Font Awesome Icons
    
        
    
    
    Google Material Design Icons
    
        whatshot
    
    
    Bootstrap Icons
    
        
    

  

输出：