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 sobre la variación circular del icono .
La variación circular de iconos permite al usuario crear los iconos circulares del conjunto de iconos de la interfaz de usuario semántica.
Clases de variación circular del icono de la interfaz de usuario semántica:
- circular: Esto establece el icono en un círculo.
Sintaxis:
<i class="circular ...">
...
</i>
Ejemplo 1: el siguiente código muestra las clases de iconos circulares junto con los iconos de paso , retroceso , reproducción y avance de las clases de 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 style="color:green">GeeksforGeeks</h1> <p><strong>Semantic UI icon circular variation</strong></p> <i class="circular backward icon"></i> <i class="circular step backward icon"></i> <i class="circular play icon"></i> <i class="circular step forward icon"></i> <i class="circular forward icon"></i> </div> </body> </center> </html>
Producción:
Ejemplo 2: el siguiente código muestra las clases de iconos circulares junto con el icono de archivo , carpeta , código e error de las clases de conjuntos 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 circular variation</strong></p> <i class="circular file icon"></i> <i class="circular folder icon"></i> <i class="circular code icon"></i> <i class="circular bug 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