Bulma es un marco CSS gratuito y de código abierto basado en flexbox . Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
La entrada de Bulma con íconos impresionantes de fuente se usa para configurar los íconos en un campo de entrada. Los íconos impresionantes de fuentes se usan a la izquierda o a la derecha o en ambos lados. De forma predeterminada, el icono se mostrará en el centro.
Entrada de Bulma con clases de iconos impresionantes de fuente:
Podemos agregar uno de los dos modificadores al diseño de la clase de control.
- has-icons-left: se utiliza para establecer el icono en el lado izquierdo del campo de entrada.
- has-icons-right: se utiliza para establecer el icono en el lado derecho del campo de entrada.
Sintaxis:
<p class="control has-icons-left">...</p>
Después de agregar los modificadores en el diseño de la clase de control, debe agregar un modificador en el icono.
- icon is-left: esta clase se usa cuando se usa has-icons-left .
- icon is-right: esta clase se usa cuando se usa has-icons-right .
Sintaxis:
<input class="input" type="" placeholder="">
<span class="icon is-left">
<i class="fas fa-envelope"></i>
</span>
Ejemplo:
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>
Producción:
Entrada de Bulma con iconos de Font Awesome
Referencia: https://bulma.io/documentation/form/input/#with-font-awesome-icons