El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El icono de interfaz de usuario semántica es un glifo que se utiliza para mostrar otra cosa en lugar de texto para ahorrar espacio y tiempo. Los iconos se utilizan para ayudar a los usuarios a navegar y tienen el mismo significado en todos los idiomas y, por lo tanto, muchos elementos no necesitan estar escritos en diferentes idiomas.
La variación rotada del ícono de la interfaz de usuario semántica nos ayuda a rotar el ícono en el sentido de las agujas del reloj o en el sentido contrario. Los iconos se giran 90 grados en cualquier dirección.
Clases de variación rotada del icono de la interfaz de usuario semántica:
- en el sentido de las agujas del reloj: gira el icono en la dirección del reloj en 90 grados.
- en el sentido contrario a las agujas del reloj : gira el icono en dirección contraria a la del reloj en 90 grados.
Sintaxis : agregue la clase girada en el sentido de las agujas del reloj o en el sentido contrario al de las agujas del reloj al icono de la siguiente manera para rotar los iconos:
<i class="clockwise rotated icon">
...
</i>
Ejemplo: el siguiente ejemplo ilustra la variación rotada de los iconos de la interfaz de usuario semántica. En el siguiente ejemplo, hemos girado los íconos en sentido horario y antihorario usando las clases anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong> Semantic UI Icon Rotated Variation </strong>
</center>
</div>
<div>
<center>
<div class="ui segment">
<i class="clockwise rotated
microphone large icon"></i>
<i class="counterclockwise rotated
microphone large icon"></i>
</div>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#rotated
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA