El Icon.css es un elemento único que responde a los iconos css puros. Hay tres tipos de iconos: iconos de navegación, iconos de acción e iconos de objeto. Aquí en este artículo conoceremos los íconos de Acción. Los iconos de acción de Spectre se utilizan en cualquier botón relacionado con la acción.
Iconos de acción de Spectre Clases:
- icon-resize-horiz: Esta clase se utiliza para mostrar el icono de cambio de tamaño en horizontal.
- icon-resize-vert: esta clase se utiliza para mostrar el icono de cambio de tamaño en vertical.
- icon-plus: esta clase se utiliza para mostrar el icono más.
- icon-minus: esta clase se utiliza para mostrar el icono menos.
- icon-cross: esta clase se utiliza para mostrar el icono de la cruz.
- icon-check: esta clase se utiliza para mostrar el icono de verificación.
- icon-stop: esta clase se utiliza para mostrar el icono de parada.
- icon-shutdown: esta clase se utiliza para mostrar el icono de apagado.
- icon-refresh: esta clase se utiliza para mostrar el icono de actualización.
- icon-search: esta clase se utiliza para mostrar el icono de búsqueda.
- icon-flag: esta clase se utiliza para mostrar el icono de la bandera.
- icon-bookmark: esta clase se utiliza para mostrar el icono de marcador.
- icon-edit: esta clase se utiliza para mostrar el icono de edición.
- icon-delete: esta clase se utiliza para mostrar el icono de eliminación.
- icon-share: esta clase se utiliza para mostrar el icono de compartir.
- icon-download: esta clase se utiliza para mostrar el icono de descarga.
- icon-upload: esta clase se utiliza para mostrar el icono de carga.
- icon-copy: esta clase se utiliza para mostrar el icono de copia.
Sintaxis:
<i class="icon Action-icon"></i>
Ejemplo: En este ejemplo usaremos todos los iconos de acción.
HTML
<!DOCTYPE html> <html> <head> <title>SPECTRE CSS Icons 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 Action icons Class</strong> <br><br> <div class="container"> <div> Resize-horiz: <button class="btn btn-success"> <i class="icon icon-resize-horiz"></i> </button> Resize-vert: <button class="btn btn-success"> <i class="icon icon-resize-vert"></i> </button> Plus: <button class="btn btn-success"> <i class="icon icon-plus"></i> </button> Minus: <button class="btn btn-success"> <i class="icon icon-minus"></i> </button> Cross: <button class="btn btn-success"> <i class="icon icon-cross"></i> </button> Check: <button class="btn btn-success"> <i class="icon icon-check"></i> </button> </div> <br> <div> Stop: <button class="btn btn-success"> <i class="icon icon-stop"></i> </button> Shutdown: <button class="btn btn-success"> <i class="icon icon-shutdown"></i> </button> Refresh: <button class="btn btn-success"> <i class="icon icon-refresh"></i> </button> Search: <button class="btn btn-success"> <i class="icon icon-search"></i> </button> Flag: <button class="btn btn-success"> <i class="icon icon-flag"></i> </button> Bookmark: <button class="btn btn-success"> <i class="icon icon-bookmark"></i> </button> </div> <br> <div> Edit: <button class="btn btn-success"> <i class="icon icon-edit"></i> </button> Delete: <button class="btn btn-success"> <i class="icon icon-delete"></i> </button> Share: <button class="btn btn-success"> <i class="icon icon-share"></i> </button> Download: <button class="btn btn-success"> <i class="icon icon-download"></i> </button> Upload: <button class="btn btn-success"> <i class="icon icon-upload"></i> </button> Copy: <button class="btn btn-success"> <i class="icon icon-copy"></i> </button> </div> </div> </center> </body> </html>
Producción:
Iconos de acción de espectro
Referencia: https://picturepan2.github.io/spectre/elements/icons.html#icons-action
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA