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 sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchos grupos, incluidos Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco está construido sobre un sistema de arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. Además, viene con CLI, por lo que es fácil de aplicar con paquetes de módulos. Proporciona la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las insignias son el componente básico que se utiliza para mostrar un indicador o contar un número, es decir, la cantidad de elementos no leídos. Ayuda a hacer coincidir el tamaño de los elementos primarios inmediatos con tamaños de fuente relativos. Foundation CSS generalmente usa la clase .badge con el elemento <span> para crear insignias.
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 la insignia CSS de la Fundación:
- insignia : esta clase se utiliza para crear una insignia para agregar al elemento.
- fi-iconname*: esta clase se utiliza para especificar el icono particular que se mostrará, según la clase utilizada.
Sintaxis:
<span class="badge color-class">
<i class="icon-class"></i>
</span>
Consulte la página de iconos básicos para obtener una descripción detallada relacionada con las otras clases de iconos.
Ejemplo 1: Este es un ejemplo básico que ilustra los iconos de insignia en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Badge 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 Badge Icons</strong> <br> <span class="badge"> <i class="fi-share"></i> </span> <span class="badge"> <i class="fi-check"></i> </span> <span class="badge"> <i class="fi-wrench"></i> </span> <span class="badge"> <i class="fi-sheriff-badge"></i> </span> <span class="badge"> <i class="fi-pencil"></i> </span> <span class="badge"> <i class="fi-shield"></i> </span> <span class="badge"> <i class="fi-page"></i> </span> <span class="badge"> <i class="fi-social-dribbble"></i> </span> <span class="badge"> <i class="fi-shopping-cart"></i> </span> <span class="badge"> <i class="fi-target-two"></i> </span> </center> </body> </html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra iconos de insignias de colores en Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Foundation CSS Badge 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 Badge Icons</strong> <br> <span class="badge primary"> <i class="fi-share"></i> </span> <span class="badge secondary"> <i class="fi-check"></i> </span> <span class="badge success"> <i class="fi-wrench"></i> </span> <span class="badge alert"> <i class="fi-sheriff-badge"></i> </span> <span class="badge primary"> <i class="fi-pencil"></i> </span> <span class="badge warning"> <i class="fi-shield"></i> </span> <span class="badge success"> <i class="fi-page"></i> </span> <span class="badge alert"> <i class="fi-social-dribbble"></i> </span> <span class="badge warning"> <i class="fi-shopping-cart"></i> </span> <span class="badge secondary"> <i class="fi-target-two"></i> </span> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/badge.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