Bulma Form Icons

Bulma is an open-source CSS framework that holds pre-styled elements and components which makes it easy for developers to make beautiful and responsive interfaces. In this article, we will learn how to add icons to form.

To add icons to a form, one can append either has-icons-left or has-icons-right or both modifiers on the form control and is-left and/or is-right modifier(s) on the icon container depending on the modifiers applied on the form control.

Bulma Form Icons Classes:

On Form Control:

• has-icons-left: This class is used if you want to add the icon to the left of a form control.
• has-icons-right: This class is used if you want to add the icon to the left of a form control.

On Icon Container:

• is-left: This class is used on the icon container if the has-icons-left modifier is used on the form control.
• is-right: This class is used on the icon container if the has-icons-right modifier is used on the form control.

Syntax:

<div class="field">
 <p class="control has-icons-left">
 ...
 <span class="icon is-left">
 <i class="..."></i>
 </span>
 </p>
</div>

Example: The below example shows how to add icons to form controls in Bulma.

Output:

👁 Image

Reference: https://bulma.io/documentation/form/general/#with-icons