Bulma Input with Font Awesome icons

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:

Output:

👁 Bulma Input with Font Awesome icons

Reference: https://bulma.io/documentation/form/input/#with-font-awesome-icons