Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
La interfaz de usuario semántica proporciona a los usuarios varios íconos diferentes que se pueden usar para diferentes propósitos con una hermosa interfaz de usuario. Los íconos agregan más belleza al sitio web que la representación textual.
En este artículo, aprenderemos sobre los archivos de conjuntos de iconos . La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para los archivos que se utilizan en las aplicaciones de gestión de archivos.
Clases de archivos de conjunto de iconos de interfaz de usuario semántica:
- archivo: esta clase se utiliza para mostrar el icono de archivo.
- clon: esta clase se utiliza para mostrar el icono de clonación.
- contorno de clonación: esta clase se utiliza para mostrar el contorno del icono de clonación.
- copiar: esta clase se utiliza para mostrar el icono de copia.
- contorno de copia: esta clase se utiliza para mostrar el contorno del icono de copia.
- cut: esta clase se utiliza para mostrar el icono de corte.
- archivo: esta clase se utiliza para mostrar el icono del archivo.
- contorno del archivo: esta clase se utiliza para mostrar el contorno del icono del archivo.
- archivo alternativo: esta clase se utiliza para mostrar el icono de archivo alternativo.
- esquema alternativo de archivo: esta clase se utiliza para mostrar el esquema del icono alternativo de archivo.
- archivo de archivo: esta clase se utiliza para mostrar el icono de archivo de archivo.
- esquema de archivo de archivo: esta clase se utiliza para mostrar el icono de archivo de esquema.
- archivo de audio: esta clase se utiliza para mostrar el icono de archivo de audio.
- contorno del archivo de audio: esta clase se utiliza para mostrar el contorno del icono del archivo de audio.
- código de archivo: esta clase se utiliza para mostrar el icono de código de archivo.
- contorno del código del archivo: esta clase se utiliza para mostrar el contorno del icono del código del archivo.
- file excel: esta clase se utiliza para mostrar el icono del archivo excel.
- contorno del archivo excel: Esta clase se utiliza para mostrar el contorno del icono del archivo excel.
- imagen de archivo: esta clase se utiliza para mostrar el icono de imagen de archivo.
- contorno de imagen de archivo: esta clase se utiliza para mostrar el contorno del icono de imagen de archivo.
- archivo pdf: Esta clase se utiliza para mostrar el icono del archivo pdf.
- contorno del archivo pdf: esta clase se utiliza para mostrar el contorno del icono del archivo pdf.
- archivo powerpoint: Esta clase se utiliza para mostrar el icono del archivo powerpoint.
- contorno del archivo powerpoint: esta clase se utiliza para mostrar el contorno del icono del archivo powerpoint.
- archivo de video: esta clase se utiliza para mostrar el icono de archivo de video.
- contorno de archivo de vídeo: esta clase se utiliza para mostrar el contorno del icono de archivo de vídeo.
- palabra de archivo: esta clase se utiliza para mostrar el icono de palabra de archivo.
- contorno de la palabra del archivo: esta clase se utiliza para mostrar el contorno del icono de la palabra del archivo.
- carpeta: esta clase se utiliza para mostrar el icono de la carpeta.
- contorno de la carpeta: esta clase se utiliza para mostrar el contorno del icono de la carpeta.
- carpeta abierta: esta clase se utiliza para mostrar el icono de carpeta abierta.
- contorno de carpeta abierta: esta clase se utiliza para mostrar el contorno del icono de carpeta abierta.
- pegar: esta clase se utiliza para mostrar el icono de pegar.
- guardar: esta clase se utiliza para mostrar el icono de guardar.
- guardar contorno: esta clase se utiliza para mostrar el contorno del icono de guardar.
- nota adhesiva: esta clase se utiliza para mostrar el icono de la nota adhesiva.
- contorno de la nota adhesiva: esta clase se utiliza para mostrar el contorno del icono de la nota adhesiva.
Sintaxis:
<i class="icon....file_class "></i>
Ejemplo 1: este código demuestra todas las clases de conjuntos de iconos de archivos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Files</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Icon Set Images </strong> <br /> <br /> <div class="ui container"> <div class="ui grid"> <div class="three wide column"> <i class="icon big archive "></i> </div> <div class="three wide column"> <i class="icon big clone"></i> </div> <div class="three wide column"> <i class="icon big clone outline"></i> </div> <div class="three wide column"> <i class="icon big copy"></i> </div> <div class="three wide column"> <i class="icon big copy outline"></i> </div> <div class="three wide column"> <i class="icon big cut"></i> </div> <div class="three wide column"> <i class="icon big file"></i> </div> <div class="three wide column"> <i class="icon big file outline"></i> </div> <div class="three wide column"> <i class="icon big file alternate"></i> </div> <div class="three wide column"> <i class="icon big file alternate outline"></i> </div> <div class="three wide column"> <i class="icon big file archive"></i> </div> <div class="three wide column"> <i class="icon big file archive outline"></i> </div> <div class="three wide column"> <i class="icon big file audio"></i> </div> <div class="three wide column"> <i class="icon big file audio outline"></i> </div> <div class="three wide column"> <i class="icon big file code"></i> </div> <div class="three wide column"> <i class="icon big file code outline"></i> </div> <div class="three wide column"> <i class="icon big file excel"></i> </div> <div class="three wide column"> <i class="icon big file excel outline"></i> </div> <div class="three wide column"> <i class="icon big file image"></i> </div> <div class="three wide column"> <i class="icon big file image outline"></i> </div> <div class="three wide column"> <i class="icon big file pdf"></i> </div> <div class="three wide column"> <i class="icon big file pdf outline"></i> </div> <div class="three wide column"> <i class="icon big file powerpoint"></i> </div> <div class="three wide column"> <i class="icon big file powerpoint outline"></i> </div> <div class="three wide column"> <i class="icon big file video"></i> </div> <div class="three wide column"> <i class="icon big file video outline"></i> </div> <div class="three wide column"> <i class="icon big file word"></i> </div> <div class="three wide column"> <i class="icon big file word outline"></i> </div> <div class="three wide column"> <i class="icon big folder"></i> </div> <div class="three wide column"> <i class="icon big folder outline"></i> </div> <div class="three wide column"> <i class="icon big folder open"></i> </div> <div class="three wide column"> <i class="icon big folder open outline"></i> </div> <div class="three wide column"> <i class="icon big paste"></i> </div> <div class="three wide column"> <i class="icon big save"></i> </div> <div class="three wide column"> <i class="icon big save outline"></i> </div> <div class="three wide column"> <i class="icon big sticky note"></i> </div> <div class="three wide column"> <i class="icon big sticky note outline"></i> </div> </div> </div> </center> </body> </html>
Producción:
Archivos de conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: este código muestra un ejemplo de clases de conjuntos de iconos de archivos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Files</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong> Semantic-UI Icon Set Images </strong> <br /> <br /> <div class="ui container"> <div class="ui basics icon buttons"> <button class="ui button"> <i class="file icon"></i> </button> <button class="ui button"> <i class="save icon"></i> </button> <button class="ui button"> <i class="clone icon"></i> </button> <button class="ui button"> <i class="copy icon"></i> </button> <button class="ui button"> <i class="cut icon"></i> </button> </div> </div> </center> </body> </html>
Producción:
Archivos de conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#files
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA