Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente y receptivo. Un icono es un glifo que se usa para representar otra cosa. La interfaz de usuario semántica proporciona miles de íconos a través de un puerto completo de Font Awesome 5.0.8 diseñado por el equipo de Font Awesome para su conjunto de íconos estándar. Estos íconos cumplen una función muy similar al texto en una página y se pueden formatear como texto.
En este artículo, aprenderemos sobre el grupo de iconos de esquina en la interfaz de usuario semántica. El grupo de íconos de la esquina es una combinación de dos o más íconos que se superponen para crear el ícono deseado. Para crear un grupo de íconos de esquina en la interfaz de usuario semántica, creamos un ícono grande usando clases de íconos enormes y otras y luego agregamos un ícono de tamaño normal en una posición de esquina usando clases de posición.
Clase de grupo de iconos de esquina de interfaz de usuario semántica:
- esquina: esta clase coloca el icono más pequeño en la esquina del icono más grande.
Sintaxis:
<i class="huge icons"> <i class="<icon-name> ... icon"></i> <i class="top corner <icon-name> icon"></i> </i>
Ejemplo 1: este ejemplo demuestra los grupos básicos de iconos de esquina en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding:20px;"> <center> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Icon group</strong> <br> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue corner add icon"></i> </i> <i class="huge icons"> <i class="green user icon"></i> <i class="blue corner close icon"></i> </i> <i class="huge icons"> <i class="yellow share icon"></i> <i class="blue corner help icon"></i> </i> </center> </body> </html>
Producción:
Producción
Ejemplo 2: Este ejemplo muestra todos los grupos de iconos de esquina de posiciones en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body style="padding:x20px;"> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI Icon group</strong> <br> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue top left corner add icon"></i> </i> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue top right corner add icon"></i> </i> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue bottom left corner add icon"></i> </i> <i class="huge icons"> <i class="red heart icon"></i> <i class="blue bottom right corner add icon"></i> </i> </center> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/elements/icon.html#/definition#groups
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA