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.
HTML
<!DOCTYPE html> <html>
<head>
<title>Bulma Form Icons</title>
<link rel='stylesheet' href=
<link rel="stylesheet" href=
<style>
form{
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">GeeksforGeeks</h1>
<p><b>Bulma Form Icons</b></p>
<div class="container is-fluid">
<form>
<div class="field">
<p class="control has-icons-left">
<input class="input" type="text"
placeholder="Icon On Left">
<span class="icon is-left">
<i class="fas fa-user"></i>
</span>
</p>
</div>
<div class="field">
<p class="control has-icons-right">
<input class="input" type="text"
placeholder="Icon On Right">
<span class="icon is-right">
<i class="fas fa-list"></i>
</span>
</p>
</div>
<div class="field">
<p class="control has-icons-left has-icons-right">
<input class="input" type="text"
placeholder="Icon On Both Sides">
<span class="icon is-left">
<i class="fas fa-home"></i>
</span>
<span class="icon is-right">
<i class="fas fa-key"></i>
</span>
</p>
</div>
</form>
</div>
</body>
</html>
|
Output:
Reference: https://bulma.io/documentation/form/general/#with-icons