Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las etiquetas son el título de un elemento en una interfaz de usuario, es decir, proporcionan los metadatos para el campo especificado. Se puede diseñar usando las clases CSS de Foundation particulares.
Los íconos son símbolos gráficos, cada uno de los cuales tiene un significado especial y se usa para un propósito específico . Para usar la clase de icono, declare la clase con » fa » seguido del nombre del icono en la etiqueta <i>.
Clase de icono de etiqueta Foundation CSS:
- etiqueta: esta clase se usa para crear una etiqueta y generalmente se usa con elementos en línea.
- fi-iconname* : esta clase se usa para agregar diferentes etiquetas de iconos especificando el nombre de la clase.
Consulte la página de iconos básicos para obtener una descripción detallada relacionada con las otras clases de iconos.
Sintaxis:
<span class="label color-class">
<i class="icon-class"></i>...
</span>
Ejemplo 1: Este es un ejemplo básico que ilustra iconos de etiquetas normales en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Label Icons </title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Label Icons</strong> <br> <span class="label"> <i class="fi-magnifying-glass"></i> Magnifying Glass </span> <span class="label"> <i class="fi-social-github"></i> Github </span> <span class="label"> <i class="fi-zoom-out"></i> Zoom-out </span> <span class="label"> <i class="fi-bluetooth"></i> Bluetooth </span> <span class="label"> <i class="fi-mail"></i> Mail </span> </center> </body> </html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra iconos de etiquetas de colores en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Label Icons </title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <strong>Foundation CSS Label Icons</strong> <br> <span class="label primary"> <i class="fi-x-circle"></i> Close </span> <span class="label alert"> <i class="fi-x"></i> Close </span> <span class="label warning"> <i class="fi-widget"></i> Widget </span> <span class="label success"> <i class="fi-folder"></i> Folder </span> <span class="label secondary"> <i class="fi-share"></i> Share </span> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/label.html#icons
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA