如何使用 Bootstrap 在项目中添加图标？

Bootstrap 是一个免费的开源工具集，用于创建响应式网站和 Web 应用程序。它是最流行的 HTML、CSS 和 JavaScript 框架，用于开发响应式、移动优先的网站。图标是一种视觉表示，有助于理解网站，也有助于浏览网站。换句话说，图标是一个提示，它指定了使用该图标的特定任务将被执行。 Bootstrap 图标以一种美观的标准格式装饰网页/网站。一个引导图标库包含 1300 多个图标，这些图标具有高质量的设计且可免费使用。为了使用这些图标，我们将使用 Bootstrap CDN 链接将其包含在 HTML 文档中。

句法：

Bootstrap 字体图标 CSS 链接：

方法：

• 转到 Bootstrap 的官方网站并复制用于 CSS、JS、Popper.js 和 jQuery 链接的 Bootstrap CDN。
• 在 标记内添加 CDN 链接以及添加字体图标链接
• 添加带有bi bi-icon_name后跟图标名称的类。

示例 1：此示例说明了地球图标。

HTML

 

    
    
 
    
 
    
    
 
    
    

 

    
        

            Geeks For Geeks
        
         
        
Globe Icon:
            
        
    

 

输出：

示例 2：此示例说明了搜索图标。

HTML

 

    
    
         
    
 
    
    
 
    
    

 

    
        

            Geeks For Geeks
        
         
        
Search Icon:
            
        
    

 

输出：

示例 3：此示例说明了警报图标。

HTML

 

    
    
 
    
 
    
    
 
    
    

 

    
        

            Geeks For Geeks
        
         
        
Alarm Icon:
            
        
    

 

输出：

示例 4：此示例说明了购物车图标。

HTML

 

    
    
    
 
    
    
 
    
    

 

    
        

            Geeks For Geeks
        
         
        
Cart Icon:
            
        
    

 

输出：

参考：https://icons.getbootstrap.com/