带有 Font Awesome 图标的 Bulma Input

Bulma 是一个基于 flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度响应的。它使用类来实现其设计。

带有字体真棒图标的布尔玛输入用于在输入字段中设置图标。字体真棒图标用于左侧或右侧或两侧。默认情况下，图标将显示在中心。

带有字体真棒图标类的布尔玛输入：

我们可以将两个修饰符之一添加到控件类布局中。

• has-icons-left：用于设置输入栏左侧的图标。
• has-icons-right：用于设置输入框右侧的图标。

句法：

...

在控件类布局上添加修饰符后，需要在图标上添加修饰符。

• icon is-left：使用has-icons-left时使用该类。
• icon is-right：使用has-icons-right时使用该类。

句法：

例子：

HTML

  

    
    
    

  

    

        GeeksforGeeks
    
    

      Bulma Input with Font Awesome icons
    
  
  
    

        

            

                
                
                    
                
            
  
        
  
        

            

                
                
                    
                
                
                    
                
            
  
        
  
        

            

                
                
                    
                
                
                    
                
            
  
        
    

  

输出：

带有 Font Awesome 图标的 Bulma Input

参考： https://bulma.io/documentation/form/input/#with-font-awesome-icons