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. En este artículo, veamos la variación del tamaño de los iconos para los conjuntos de iconos de la interfaz de usuario semántica.
Clases de variación de tamaño de icono de IU semántica:
- mini: Esto establece que el tamaño del icono sea mini.
- tiny: Esto establece que el tamaño del icono sea minúsculo.
- pequeño: Esto establece que el tamaño del icono sea pequeño.
- grande: Esto establece que el tamaño del icono sea grande.
- grande: Esto establece que el tamaño del icono sea grande.
- enorme: Esto establece que el tamaño del icono sea enorme.
- masivo: Esto establece que el tamaño del icono sea masivo.
Sintaxis:
<i class="mini icon ...">
...
</i>
Ejemplo 1: el siguiente código muestra el ícono de error junto con diferentes variaciones de tamaño como se mencionó anteriormente.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <center> <body> <div style="margin-top:50px" class="ui container"> <h1 class="ui green header">GeeksforGeeks</h1> <p><strong>Semantic UI icon size variation</strong></p> <i class="mini code icon"></i> <i class="tiny code icon"></i> <i class="small code icon"></i> <i class="code icon"></i> <i class="large code icon"></i> <i class="big code icon"></i> <i class="huge code icon"></i> <i class="massive code icon"></i> </div> </body> </center> </html>
Producción:
Ejemplo 2: El siguiente código muestra el ícono de error junto con diferentes variaciones de tamaño del conjunto de íconos.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <center> <body> <div style="margin-top:50px" class="ui container"> <h1 class="ui header green">GeeksforGeeks</h1> <p><strong>Semantic UI icon size variation</strong></p> <i class="mini bug icon"></i> <i class="tiny bug icon"></i> <i class="small bug icon"></i> <i class="bug icon"></i> <i class="large bug icon"></i> <i class="big bug icon"></i> <i class="huge bug icon"></i> <i class="massive bug icon"></i> </div> </body> </center> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA