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 color del icono.
La variación de color del icono permite al usuario crear los iconos de colores del conjunto de iconos de la interfaz de usuario semántica.
Clases de variación de color del icono de la interfaz de usuario semántica:
- rojo: Esto establece el color del icono como rojo.
- naranja: Esto establece el color del icono como naranja.
- amarillo: Esto establece el color del icono como amarillo.
- oliva: Esto establece el color del icono como oliva.
- verde: Esto establece el color del icono como verde.
- verde azulado: Esto establece el color del icono como verde azulado.
- azul: Esto establece el color del icono como azul.
- violeta: Esto establece el color del icono como violeta.
- morado: Esto establece el color del icono como morado.
- rosa: Esto establece el color del icono como rosa.
- marrón: Esto establece el color del icono como marrón.
- gris: Esto establece el color del icono como gris.
- negro: Esto establece el color del icono como negro.
Sintaxis:
<i class="red ...."> .... </i>
Ejemplo 1: el siguiente código muestra las clases de descarga de iconos junto con las clases de colores 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> <body> <center> <div style="margin-top:50px" class="ui container"> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic UI icon coloured variation </strong><br /> <i class="red download icon"></i> <i class="orange download icon"></i> <i class="yellow download icon"></i> <i class="olive download icon"></i> <i class="green download icon"></i> <i class="teal download icon"></i> <i class="blue download icon"></i> <i class="violet download icon"></i> <i class="purple download icon"></i> <i class="pink download icon"></i> <i class="brown download icon"></i> <i class="grey download icon"></i> <i class="black download icon"></i> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente código muestra las clases de avance , reproducción y retroceso del ícono junto con las clases de colores del ícono .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <div style="margin-top:50px" class="ui container"> <h1 class="ui header green"> GeeksforGeeks </h1> <p><strong> Semantic UI icon coloured variation </strong></p> <i class="red backward icon"></i> <i class=" step backward icon"></i> <i class="blue play icon"></i> <i class=" step forward icon"></i> <i class="red forward icon"></i> </div> </center> </body> </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