Bulma Input with Font Awesome icons

Last Updated : 24 Jan, 2022

Bulma is a free, open-source CSS framework based on flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

Bulma input with font awesome icons are used to set the icons in an input field. The font awesome icons are used either left or right or both sides. By default, the icon will display in the center.

Bulma input with font awesome icons classes:

We can add one of the two modifiers to the control class layout.

has-icons-left: It is used to set the icon on the left side of the input field.
has-icons-right: It is used to set the icon on the right side of the input field.

Syntax:

<p class="control has-icons-left">...</p>

After adding the modifiers on the control class layout, you need to add a modifier on the icon.

icon is-left: This class is used when has-icons-left is used.
icon is-right: This class is used when has-icons-right is used.

Syntax:

<input class="input" type="" placeholder="">
    <span class="icon is-left">
      <i class="fas fa-envelope"></i>
    </span>

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bulma Input with Font Awesome icons</title> 
    <link rel='stylesheet'
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
</head> 
  
<body class="has-text-centered"> 
    <h1 class="is-size-1 has-text-success"> 
        GeeksforGeeks 
    </h1> 
    <p class="is-size-3"> 
      Bulma Input with Font Awesome icons 
    </p> 
  
  
    <div class="container"> 
        <div class="field"> 
            <p class="control has-icons-right"> 
                <input class="input" type="text" 
                    placeholder="Enter Name"> 
                <span class="icon is-right"> 
                    <i class="fa fa-check"></i> 
                </span> 
            </p> 
  
        </div> 
  
        <div class="field"> 
            <p class="control has-icons-left has-icons-right"> 
                <input class="input" type="text" 
                       placeholder="Enter Address"> 
                <span class="icon is-small is-left"> 
                    <i class="fa fa-map-marker"></i> 
                </span> 
                <span class="icon is-small is-right"> 
                    <i class="fa fa-check"></i> 
                </span> 
            </p> 
  
        </div> 
  
        <div class="field"> 
            <p class="control has-icons-left has-icons-right"> 
                <input class="input" type="number" 
                       placeholder="Mob No."> 
                <span class="icon is-small is-left"> 
                    <i class="fa fa-mobile"></i> 
                </span> 
                <span class="icon is-small is-right"> 
                    <i class="fa fa-check"></i> 
                </span> 
            </p> 
  
        </div> 
    </div> 
</body> 
  
</html>