Variación ajustada del icono de interfaz de usuario semántica

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 ajustada del icono de la IU semántica se utiliza para mostrar iconos entre el texto sin ocupar espacio adicional. Los iconos se ajustan sin ningún espacio adicional a la izquierda o a la derecha.

Icono de interfaz de usuario semántica clase de variación ajustada:

  • equipado : agregue esta clase al ícono y el ícono ocupará menos espacio.

Sintaxis

<i class="like fitted icon">
    ...
</i>

Ejemplo : el siguiente ejemplo ilustra la variación ajustada del icono de la interfaz de usuario semántica . En este ejemplo, tenemos dos textos que contienen iconos, uno con clase ajustada y otro sin clase ajustada.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
           rel="stylesheet"/>       
    </head>
    <body>
        <center>
            <h1 class="header ui green">
                GeeksforGeeks
            </h1>
            <strong>        
                    Semantic UI Icon Fitted Variation            
            </strong>
        </center>
        <h3 class="ui dividing header" id="commentsHeader">
            Icons
        </h3>
        <p> This icon
            <i class="like fitted icon"></i>
            have fitted variation
        </p>
  
        <p> This icon
            <i class="like icon"></i>
            does not have fitted variation
        </p>
    </body>
</html>

Producción:

Referencia : https://semantic-ui.com/elements/icon.html#fitted

Publicación traducida automáticamente

Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *