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 los encabezados de iconos. La interfaz de usuario semántica proporciona algunas de las clases de íconos más utilizadas para el tipo de encabezado que se usaron principalmente en los editores y aquí están las clases.
Clases de tipos de encabezados de iconos de interfaz de usuario semántica:
- icono: esta clase se utiliza para mostrar el icono en los encabezados.
- escritorio: esta clase se utiliza para mostrar el icono del escritorio.
- download: Esta clase se utiliza para mostrar el icono de descarga.
Sintaxis:
<div class="ui icon header">
<i class="any-icon"></i>
...
</div>
Ejemplo 1: este código demuestra el uso de la clase Icon Headers Type.
HTML
<html> <head> <title>Semantic-UI Icon Headers Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h4> Semantic-UI Icon Headers Type </h4> <h4 class="ui icon header"> <i class="download icon"></i> <div class="content"> Download </div> </h4> </center> <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Tipo de encabezados de iconos de interfaz de usuario semántica
Ejemplo 2: Este es otro código para demostrar el uso de la clase Icon Headers Type.
HTML
<html> <head> <title>Semantic-UI Icon Headers Type</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h4> Semantic-UI Icon Headers Type </h4> <h2 class="ui icon header"> <i class="circular desktop icon"></i> <div class="content"> Desktop </div> </h2> </center> <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Tipo de encabezados de iconos de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/header.html#icon-headers
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA