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, veamos el conjunto de iconos de imágenes. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para imágenes para cámaras o aplicaciones de edición de video y aquí están las clases.
Clases de imágenes de conjunto de iconos de interfaz de usuario semántica:
- ajustar: esta clase se utiliza para mostrar el icono de ajuste.
- cerrojo: Esta clase se utiliza para mostrar el icono del cerrojo.
- cámara: esta clase se utiliza para mostrar el icono de la cámara.
- cámara retro: estas clases se utilizan para mostrar el icono de la cámara retro.
- clon: esta clase se utiliza para mostrar el icono de clonación.
- contorno de clonación: estas clases se utilizan para mostrar el contorno del icono de clonación.
- compress: esta clase se utiliza para mostrar el icono comprimido.
- expandir: esta clase se usa para mostrar el ícono de expandir.
- eye: esta clase se utiliza para mostrar el icono del ojo.
- cuentagotas: estas clases se utilizan para mostrar el icono del cuentagotas.
- barra oblicua: estas clases se utilizan para mostrar el icono de barra oblicua.
- contorno de barra oblicua: estas clases se utilizan para mostrar el contorno del icono de barra oblicua.
- imagen de archivo: estas clases se utilizan para mostrar el icono de imagen de archivo.
- contorno de imagen de archivo: estas clases se utilizan para mostrar el contorno del icono de imagen de archivo.
- film: Esta clase se utiliza para mostrar el icono de la película.
- credencial de identificación: estas clases se utilizan para mostrar el icono de la credencial de identificación.
- contorno de la credencial de identificación: estas clases se utilizan para mostrar el contorno del icono de la credencial de identificación.
- tarjeta de identificación: estas clases se utilizan para mostrar el icono de la tarjeta de identificación.
- contorno de la tarjeta de identificación: estas clases se utilizan para mostrar el contorno del icono de la tarjeta de identificación.
- imagen: esta clase se utiliza para mostrar el icono de la imagen.
- contorno de la imagen: estas clases se utilizan para mostrar el contorno del icono de la imagen.
- imágenes: esta clase se utiliza para mostrar el icono de imágenes.
- contorno de imágenes: estas clases se utilizan para mostrar el contorno del icono de imágenes.
- controles deslizantes horizontales: estas clases se utilizan para mostrar el icono horizontal del control deslizante.
- tinte: esta clase se utiliza para mostrar el icono de tinte.
Sintaxis:
<i class="icon.... images-class"></i>
Ejemplo 1: este código muestra todas las clases de conjuntos de iconos de imágenes.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Images</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 adjust "></i> </div> <div class="three wide column"> <i class="icon big bolt "></i> </div> <div class="three wide column"> <i class="icon big camera"></i> </div> <div class="three wide column"> <i class="icon big camera retro"></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 compress "></i> </div> <div class="three wide column"> <i class="icon big expand"></i> </div> <div class="three wide column"> <i class="icon big eye"></i> </div> <div class="three wide column"> <i class="icon big eye dropper"></i> </div> <div class="three wide column"> <i class="icon big eye slash "></i> </div> <div class="three wide column"> <i class="icon big eye slash 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 film"></i> </div> <div class="three wide column"> <i class="icon big id badge"></i> </div> <div class="three wide column"> <i class="icon big id badge outline"></i> </div> <div class="three wide column"> <i class="icon big id card"></i> </div> <div class="three wide column"> <i class="icon big id card outline"></i> </div> <div class="three wide column"> <i class="icon big image"></i> </div> <div class="three wide column"> <i class="icon big image outline"></i> </div> <div class="three wide column"> <i class="icon big images"></i> </div> <div class="three wide column"> <i class="icon big images outline"></i> </div> <div class="three wide column"> <i class="icon big sliders horizontal"></i> </div> <div class="three wide column"> <i class="icon big tint"></i> </div> </div> </div> </center> </body> </html>
Producción:
Imágenes de conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: Este código demuestra las clases de conjunto de iconos de imágenes.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Images</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 icon black buttons"> <button class="ui button"> <i class="camera icon"></i> </button> <button class="ui button"> <i class="images icon"></i> </button> <button class="ui button"> <i class="clone icon"></i> </button> <button class="ui button"> <i class="expand icon"></i> </button> <button class="ui button"> <i class="compress icon"></i> </button> </div> </div> </center> </body> </html>
Producción:
Imágenes de conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#images
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA