Spectre Forms Form icons se usa para incluir íconos en el formulario. En el componente Spectre Forms tenemos un icon.css para incluir iconos en el campo de formulario. Podemos alinearlos como queramos a izquierda o derecha. Solo necesitamos agregar un ícono de formulario en el campo de entrada para incluir el ícono de deseo.
Formularios Iconos de formulario Clases:
- form-icon: esta clase se utiliza para incluir los iconos en el campo de entrada.
- tiene-icono-izquierda: esta clase se utiliza para colocar el icono en el lado izquierdo del campo de entrada.
- tiene-icono-derecha: esta clase se utiliza para colocar el icono en el lado derecho del campo de entrada.
Sintaxis:
Para establecer la alineación del icono:
<div class="has-icon-right"> .... </div>
Para configurar el icono deseado:
<i class="form-icon icon ..></icon>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Forms Class</title> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <strong>SPECTRE Forms Form icons Class</strong> <br> </center> <form> <label class="form-label">Email Id:</label> <div class="form-group has-icon-right"> <input class="form-input " type="text" placeholder="Email Id" value="mastermind@gmail.com"> <i class="form-icon icon icon-check"></i> </div> <button class="btn btn-success"> Download <i class="form-icon icon icon-download"></i> </button> <button class="btn btn-error"> <i class="form-icon icon icon-shutdown"></i> </button> </form> </body> </html>
Producción:
Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-icons
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA