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 Objetos. La interfaz de usuario semántica proporciona algunas de las clases de iconos más utilizadas para los objetos.
Conjunto de iconos de interfaz de usuario semántica Clases de objetos:
- *icon object_class: esta clase se utiliza para incluir diferentes iconos de objetos en las interfaces.
Sintaxis:
<i class="icon....object_class "></i>
Nota: https://semantic-ui.com/elements/icon.html#objects
Ejemplo 1: este código muestra todas las clases de conjuntos de iconos de objetos
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 Objects </strong> <br /> <br /> <div class="container"> <div class="ui grid"> <div class="three wide column"> <i class="icon big ambulance"></i> </div> <div class="three wide column"> <i class="icon big anchor"></i> </div> <div class="three wide column"> <i class="icon big archive"></i> </div> <div class="three wide column"> <i class="icon big balance scale"></i> </div> <div class="three wide column"> <i class="icon big bath"></i> </div> <div class="three wide column"> <i class="icon big beer"></i> </div> <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 bicycle "></i> </div> <div class="three wide column"> <i class="icon big binoculars"></i> </div> </div> </center> </body> </html>
Producción :
Objetos 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 objetos.
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 Objects </strong> <br /> <br /> <div class="container"> <div class="ui labeled icon menu"> <a class="item"> <i class="home icon"></i> Home </a> <a class="item"> <i class="chat icon"></i> Messages </a> <a class="item"> <i class="bullhorn icon"></i> Notifications </a> <a class="item"> <i class="bug icon"></i> Report bug </a> <a class="right item"> <i class="bookmark icon"></i> Bookmarks </a> </div> </div> </center> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#objects
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA