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 del enlace del icono de la interfaz de usuario semántica ayuda a formatear un icono como un enlace. La variación de enlace agrega un efecto de desplazamiento al icono y cambia el puntero del mouse como un cursor para enlaces.
Clases de variación de enlace de icono de interfaz de usuario semántica:
- enlace: al agregar esta clase, podemos formatear un ícono como un enlace que tiene todas las características del enlace, como el efecto de desplazamiento y el puntero del mouse para que sea como un cursor.
Sintaxis: agregue la clase de enlace para hacer que el icono sea un enlace de la siguiente manera.
<i class="link icon">
...
</i>
Ejemplo: El siguiente ejemplo ilustra la variación del enlace del icono de la interfaz de usuario semántica. En el siguiente ejemplo, los íconos se formatean como enlaces agregando la clase de enlace .
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 Link Variation
</strong>
<div class="ui segment">
<i class="link cloud huge icon"></i>
<i class="link globe huge icon"></i>
</div>
</center>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#link
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA