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 pagos y compras.
La interfaz de usuario semántica proporciona algunas de las clases de íconos más utilizadas para Pagos y Compras para aplicaciones de comercio electrónico o tecnología educativa y aquí están las clases.
Conjunto de iconos de interfaz de usuario semántica Clases de pagos y compras:
- campana: Esta clase se utiliza para mostrar el icono de la campana.
- contorno de la campana: esta clase se utiliza para mostrar el contorno del icono de la campana.
- marcador: esta clase se utiliza para mostrar el icono de marcador
- contorno de marcador: esta clase se utiliza para mostrar el contorno del icono de marcador
- megáfono: Esta clase se utiliza para mostrar el icono de megáfono.
- cámara: esta clase se utiliza para mostrar el icono de la cámara.
- cámara retro: esta clase se utiliza para mostrar el icono de la cámara retro.
- flecha del carrito hacia abajo: esta clase se utiliza para mostrar el icono de la flecha del carrito hacia abajo.
- cart plus: esta clase se utiliza para mostrar el icono cart plus.
- tarjeta de crédito: esta clase se utiliza para mostrar el icono de la tarjeta de crédito.
- contorno de la tarjeta de crédito: esta clase se utiliza para mostrar el contorno del icono de la tarjeta de crédito .
- gema: esta clase se usa para mostrar el icono de la gema
- contorno de la gema: esta clase se utiliza para mostrar el contorno del icono de la gema.
- regalo: esta clase se utiliza para mostrar el icono de regalo.
- apretón de manos: esta clase se utiliza para mostrar el icono de apretón de manos.
- contorno de apretón de manos: esta clase se utiliza para mostrar el contorno del icono de apretón de manos.
- corazón: esta clase se utiliza para mostrar el icono del corazón.
- contorno del corazón: esta clase se utiliza para mostrar el contorno del icono del corazón.
- key: esta clase se utiliza para mostrar el icono de la llave.
- bolsa de la compra: esta clase se utiliza para mostrar el icono de la bolsa de la compra.
- cesta de la compra: esta clase se utiliza para mostrar el icono de la cesta de la compra.
- carrito de compras: Esta clase se utiliza para mostrar el ícono del carrito de compras.
- estrella: esta clase se utiliza para mostrar el icono de estrella.
- contorno de estrella: esta clase se utiliza para mostrar el contorno del icono de estrella.
- etiqueta: esta clase se utiliza para mostrar el icono de la etiqueta.
- etiquetas: esta clase se utiliza para mostrar el icono de etiquetas.
- pulgares hacia abajo: esta clase se utiliza para mostrar el icono de pulgares hacia abajo.
- contorno de pulgar hacia abajo: esta clase se utiliza para mostrar el contorno del icono de pulgar hacia abajo.
- pulgares arriba: esta clase se utiliza para mostrar el icono de pulgares arriba.
- contorno de pulgar hacia arriba: esta clase se utiliza para mostrar el contorno del icono de pulgar hacia arriba.
- trofeo: esta clase se utiliza para mostrar el icono del trofeo.
Sintaxis:
<i class="icon.... shopping-class"></i>
Ejemplo 1: este código demuestra todas las clases de conjunto de iconos de compras y pagos.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </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 Payments and Shopping </strong> <br /> <br /> <div class=" ui container"> <div class="ui grid"> <div class="three wide column"> <i class="icon big bell"></i> </div> <div class="three wide column"> <i class="icon big bell outline"></i> </div> <div class="three wide column"> <i class="icon big bookmark"></i> </div> <div class="three wide column"> <i class="icon big bookmark outline"></i> </div> <div class="three wide column"> <i class="icon big bullhorn"></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 cart arrow down"></i> </div> <div class="three wide column"> <i class="icon big cart plus "></i> </div> <div class="three wide column"> <i class="icon big credit card "></i> </div> <div class="three wide column"> <i class="icon big credit card outline"></i> </div> <div class="three wide column"> <i class="icon big gem "></i> </div> <div class="three wide column"> <i class="icon big gem outline"></i> </div> <div class="three wide column"> <i class="icon big gift"></i> </div> <div class="three wide column"> <i class="icon big handshake"></i> </div> <div class="three wide column"> <i class="icon big handshake outline"></i> </div> <div class="three wide column"> <i class="icon big heart"></i> </div> <div class="three wide column"> <i class="icon big heart outline"></i> </div> <div class="three wide column"> <i class="icon big key"></i> </div> <div class="three wide column"> <i class="icon big shopping bag "></i> </div> <div class="three wide column"> <i class="icon big shopping basket"></i> </div> <div class="three wide column"> <i class="icon big shopping cart"></i> </div> <div class="three wide column"> <i class="icon big star "></i> </div> <div class="three wide column"> <i class="icon big star outline"></i> </div> <div class="three wide column"> <i class="icon big tag"></i> </div> <div class="three wide column"> <i class="icon big tags"></i> </div> <div class="three wide column"> <i class="icon big thumbs down"></i> </div> <div class="three wide column"> <i class="icon big thumbs down outline"></i> </div> <div class="three wide column"> <i class="icon big thumbs up"></i> </div> <div class="three wide column"> <i class="icon big thumbs up outline"></i> </div> <div class="three wide column"> <i class="icon big trophy"></i> </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: este código demuestra el uso del conjunto de iconos de compras y pagos.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </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 Shopping and Payments</strong> <br /> <br /> <div class="ui container"> <button class="ui button"> <i class="shopping cart icon"></i> Shop </button> <button class="ui button"> <i class="bullhorn icon"></i> Notifications </button> <button class="ui button"> <i class="bookmark icon"></i> Bookmark item </button> <button class="ui button"> <i class=" heart icon"></i> Give Feedback </button> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#payments–shopping
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA