Bulma es un marco CSS de código abierto que contiene elementos y componentes prediseñados que facilitan a los desarrolladores la creación de interfaces hermosas y receptivas. En este artículo, aprenderemos cómo agregar íconos al formulario.
Para agregar íconos a un formulario, se pueden agregar modificadores tiene íconos a la izquierda o íconos a la derecha o ambos en el control de formulario y modificadores is-left y/o is-right en el contenedor de íconos dependiendo del modificadores aplicados en el control de formulario.
Clases de iconos de formulario de Bulma:
En Control de formulario:
- has-icons-left: esta clase se utiliza si desea agregar el icono a la izquierda de un control de formulario.
- has-icons-right: esta clase se usa si desea agregar el icono a la izquierda de un control de formulario.
En el contenedor de iconos:
- is-left: esta clase se usa en el contenedor de iconos si el modificador has-icons-left se usa en el control de formulario.
- is-right: esta clase se usa en el contenedor de iconos si el modificador has-icons-right se usa en el control de formulario.
Sintaxis:
<div class="field">
<p class="control has-icons-left">
...
<span class="icon is-left">
<i class="..."></i>
</span>
</p>
</div>
Ejemplo: El siguiente ejemplo muestra cómo agregar íconos para formar controles en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Form 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/6.0.0-beta3/css/all.min.css" />
<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>
Producción:
Referencia: https://bulma.io/documentation/form/general/#with-icons