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 usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
En este artículo, vamos a aprender sobre Icon Set Brands. Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas. Un ícono es un glifo que se usa para representar otra cosa y puede representar logotipos de marcas comunes.
Ícono de contenido de etiqueta de interfaz de usuario semántica Clase:
- *brand-icon-name: Esta clase se utiliza para incluir el icono de graneros dentro de la etiqueta.
Sintaxis:
</i> <i class="*brand-icon-name icon"></i>
Nota: para conocer todas las marcas, puede consultar esta página https://semantic-ui.com/elements/icon.html#brands
El siguiente ejemplo ilustra las marcas del conjunto de iconos de interfaz de usuario semántica:
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Brands</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksForGeeks </h1> <h2>Semantic UI Icon Set Brands</h2> <i class="youtube large icon"> youtube </i> <br><br><br> <i class="whatsapp large icon"> whatsapp </i> <br><br><br> <i class="google large icon"> google </i> <br><br><br> <i class="instagram large icon"> instagram </i> </center> </body> </html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Icon Set Brands</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green"> GeeksForGeeks </h1> <h2>Semantic UI Icon Set Brands</h2> <i class="soundcloud large icon red"> soundcloud </i> <br><br><br> <i class="vimeo large icon grey"> vimeo </i> <br><br><br> <i class="tumblr large icon purple"> tumblr </i> <br><br><br> <i class="twitter large icon blue"> twitter </i> <br><br><br> </center> </body> </html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#brands
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA