如何在 Bootstrap 中插入搜索图标？

在本文中，我们将了解如何在 Bootstrap 中插入搜索图标。虽然 Bootstrap 默认不包含图标集，但它们确实有自己的综合图标库，称为 Bootstrap 图标。随意使用它们或项目中的任何其他图标集。有多种方法可以将搜索图标或其他图标添加到 HTML 页面。图标库中的所有图标都可以使用 CSS 自定义（大小、对齐、旋转、阴影、颜色等）。

方法 1：使用 bootstrap Glyphicons： Bootstrap 为我们提供了各种预定义的图标，包括搜索图标。您可以从 https://glyphicons.com/ 添加各种类型的图标。

分步实施指南：

第 1 步：在所有其他样式表之前将 Bootstrap 和 jQuery CDN 包含到 标记中以加载我们的 CSS。

 
 

第 2 步：在带有类容器的 HTML 正文中添加

标签。

第 3 步：现在使用以下语法添加您想要的任何图标，其中名称是 glyphicon 的名称。

示例：以下示例显示了不同类型的字形图标及其用法。

HTML

  

    
    
    
    
    

  

  
    
        Glyphicons Examples
  
        Camera icon:
            
        
  
        Search icon:
  
  
        Search icon on a button:
            
                 Search
            
        
  
        Bell icon:
            
        
    

  

输出：

所有字形图标

方法 2 使用 font awesome 图标： Font Awesome 是一种 Web 字体，包含来自 Twitter Bootstrap 框架的所有图标。 Font Awesome 是一个广泛使用的图标集，它为您提供可使用 CSS 自定义的可缩放矢量图像。

分步实施指南：

第 1 步：将工具包的代码复制到项目中每个模板或页面的 中，您希望通过该工具包使用 Font Awesome。如果您已经在使用其他版本或风格的 Font Awesome，请确保将其删除。

第 2 步：使用一行代码将任何免费图标添加到项目中。

句法：

示例：以下示例显示了不同类型的字体真棒图标，包括搜索图标及其用法。

HTML

  

    
    

  

    
        GeeksforGeeks
    
  
    
    
    
    
    Search icon
        
    

  

输出：

搜索图标