如何用Bootstrap中的另一个默认图标替换dropdown-toggle图标？

Bootstrap提供了向我们的网站添加下拉菜单的选项。下拉按钮上的默认图标是“向下实心箭头”徽标。即使达到目的，当今大多数现代网站仍使用Bootstrap。因此，该图标对于访问者而言可能看起来非常通用。

程序：

  

    Bootstrap dorpdown
    
  
    
  
    
    
  
    
    
  
    
    
  
    
        .container{
            margin:20px;
        }
        h2{
            color:green;
        }
    

  

    
        GeeksforGeeks
        A Computer Science Portal for Geeks
        
            
                Dropdown
            
            
                Option A
                Option B
                Option C
                Option D
            
        
    

  

输出：

但是，可以将默认的Bootstrap图标更改为您选择的图标。您还可以使该图标可切换，请按照以下步骤进行操作。

• 步骤1：前往外部图标网站，例如Font Awesome。将其CDN链接嵌入到网页的标签中。

• 步骤2：将下拉式切换的CSS更改为display：none 。这将使按钮上的纯色下拉徽标消失。但是，还必须添加“！important”以查看网页上的更改。

  .dropdown-toggle::after {
      display: none !important;
  }
  

• 步骤3：应用CSS后，从外部图标网站复制要在网页上显示的图标的嵌入代码，然后将其粘贴到button标记内。像在此示例中一样，我们使用的是“加号”图标。
• 步骤4：新图标将开始在网页上显示。

注意：在程序代码的下拉图标下方也可以通过在图标上单击函数添加一行jQuery代码来切换。

程序：此示例更改了Bootstrap下拉图标的默认图标。

  

    Bootstrap dorpdown
    
    
    
    
    
    
    
    
    
    
        .container{
            margin:20px;
        }
        h2{
            color:green;
        }
        .dropdown-toggle::after {
            display: none !important;
        }
        .fa {
            margin:2px;
            color:white;
        }
    


    
        GeeksforGeeks
        A Computer Science Portal for Geeks
        
              
            
            
                Dropdown
                
                      
                    
                    
                
            
              
            
            
                Option A
                Option B
                Option C
                Option D
            
        
    
     
          
        // Function to toggle the plus menu into minus 
        function myFunction(x) { 
            x.classList.toggle("fa-minus-circle"); 
        } 
     

  

输出：