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 bordeada por íconos.
La variación con borde de icono permite al usuario hacer los iconos con borde del conjunto de iconos de la interfaz de usuario semántica.
Clases de variación con borde de icono de interfaz de usuario semántica:
- bordeado: Esto establece el icono dentro del borde.
Sintaxis:
<i class="bordered icon ...">
...
</i>
Ejemplo 1: el siguiente código muestra las clases de iconos de alineación bordeada junto con las clases izquierda , derecha , centro y justificación del conjunto de iconos .
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 bordered variation</strong></p> <i class="bordered align left icon"></i> <i class="bordered align center icon"></i> <i class="bordered align justify icon"></i> <i class="bordered align right icon"></i> </div> </body> </center> </html>
Producción:
Ejemplo 2: el siguiente código muestra las clases de iconos con borde junto con las clases de copiar , pegar , vincular y portapapeles del conjunto de iconos .
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 bordered variation</strong></p> <i class="bordered copy icon"></i> <i class="bordered paste icon"></i> <i class="bordered linkify icon"></i> <i class="bordered clipboard icon"></i> </div> </body> </center> </html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#/icon
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA