布尔玛窗体图标

Bulma是一个开放源代码 CSS 框架，它包含预先设置样式的元素和组件，使开发人员可以轻松制作漂亮且响应迅速的界面。在本文中，我们将学习如何在表单中添加图标。

要将图标添加到表单，可以在表单控件上附加has-icons-left或has-icons-right或两个修饰符，并在图标容器上附加is-left和/或is-right修饰符，具体取决于应用于表单控件的修饰符。

布尔玛表格图标类：

在表单控件上：

• has-icons-left：如果要将图标添加到表单控件的左侧，则使用此类。
• has-icons-right：如果要在表单控件的左侧添加图标，则使用此类。

在图标容器上：

• is-left：如果在表单控件上使用了has-icons-left修饰符，则在图标容器上使用此类。
• is-right：如果在表单控件上使用了has-icons-right修饰符，则在图标容器上使用此类。

句法：

    

        ...
        
            
        
    

示例：下面的示例显示了如何在 Bulma 中为表单控件添加图标。

HTML

  

    
    
    
    

  

    
GeeksforGeeks
    
Bulma Form Icons
  
    

        

            

                

                    
                    
                        
                    
                
  
            
  
            

                

                    
                    
                        
                    
                
  
            
  
            

                

                    
                    
                        
                    
                    
                        
                    
                
  
            
        
    

  

输出：

参考： https://bulma.io/documentation/form/general/#with-icons