Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El marco de Bulma proporciona varios tipos de íconos de Material Design como Fontawesome, ionicons, etc. para usar en el desarrollo de aplicaciones web, que son compatibles con todas las bibliotecas de fuentes de íconos. A continuación veremos cómo usar iconos de Material design en Bulma con tamaños y ejemplos. Podemos crear el contenedor de diferentes tamaños en Material Design Icons y también podemos modificar los colores del icono con algunas clases específicas que se analizan a continuación.
Clase de iconos de diseño de materiales de Bulma:
- mdi: para usar íconos de diseño de materiales en Bulma, usamos la clase mdi en un elemento span.
Bulma Lista de clases de contenedores de iconos de diseño de materiales:
- icono: esta clase se utiliza para crear un contenedor de tamaño 1,5 rem x 1,5 rem.
- icon is-small: esta clase se utiliza para crear un contenedor de tamaño 1rem x 1rem.
- icon is-medium: esta clase se utiliza para crear un contenedor de tamaño 2rem x 2rem.
- icon is-large: Esta clase se utiliza para crear un contenedor de tamaño 3rem x 3rem.
Bulma Lista de clases de iconos de diseño de materiales:
- mdi-light: Esta clase se usa para agregar un icono con color claro.
- mdi-dark: esta clase se usa para agregar un icono con color oscuro.
- mdi-light mdi-inactive: Esta clase se usa para agregar un icono con color claro inactivo.
- mdi-dark mdi-inactive: Esta clase se usa para agregar un ícono con color oscuro inactivo.
- mdi-flip-h: esta clase se usa para voltear un ícono horizontalmente.
- mdi-flip-v: esta clase se usa para voltear un ícono verticalmente.
- mdi-rotate-45: esta clase se usa para rotar un ícono a 45 0 .
- mdi-rotate-90: esta clase se usa para rotar un ícono a 90 0 .
- mdi-rotate-180: esta clase se usa para rotar un ícono en 180 0 .
Sintaxis:
<span class="icon Material-Design-Icon-Container-Classes">
<span class="Material-Design-Icons-class
Material-Design-Icon-Classes"></span>
....
</span>
Ejemplo 1: El siguiente ejemplo ilustra los íconos de diseño de materiales de Bulma, clases de contenedores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma Material Design Icons</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" /> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h4 class="subtitle"> Bulma Material Design icons </h4> <!-- icon is-small class --> <div class="container"> <span class="icon is-small has-text-success"> <span class="mdi mdi-book"></span> </span> <br> <!-- icon class --> <span class="icon has-text-dark"> <span class="mdi mdi-bell-circle mdi-18px"></span> <span class="mdi mdi-bell-circle mdi-24px"></span> </span> <br> <!-- icon is-medium class --> <span class="icon is-medium has-text-info"> <span class="mdi mdi-home"></span> <span class="mdi mdi-home mdi-18px"></span> <span class="mdi mdi-home mdi-24px"></span> <span class="mdi mdi-home mdi-36px"></span> </span> <br> <!-- icon is-large class --> <span class="icon is-large has-text-danger"> <span class="mdi mdi-account"></span> <span class="mdi mdi-account mdi-18px"></span> <span class="mdi mdi-account mdi-24px"></span> <span class="mdi mdi-account mdi-36px"></span> <span class="mdi mdi-account mdi-48px"></span> </span> </div> </div> </body> </html>
Producción:
Iconos de diseño de materiales de Bulma
Ejemplo 2: El siguiente ejemplo ilustra las clases de iconos de diseño de materiales de Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bulma Material Design Icons</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" /> </head> <body> <div class="content container has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h4 class="subtitle"> Bulma Material Design icons </h4> <div class="container"> <!-- Light icon modifier class --> <span class="icon is-large has-background-success"> <span class="mdi mdi-light mdi-bell"></span> </span> <br /> <!-- Dark icon modifier class --> <span class="icon is-large has-background-success mt-4"> <span class="mdi mdi-dark mdi-bell"></span> </span> <br /> <!-- Light inactive icon modifier class --> <span class="icon is-large has-background-success mt-4"> <span class="mdi mdi-light mdi-inactive mdi-bell"></span> </span> <br /> <!-- Dark inactive icon modifier class --> <span class="icon is-large has-background-success mt-4"> <span class="mdi mdi-dark mdi-inactive mdi-bell"></span> </span> <br /> <!-- Flipped icons modifier class --> <span class="icon is-large has-background-success mt-4"> <span class="mdi mdi-flip-v mdi-bell"></span> <span class="mdi mdi-flip-h mdi-bell"></span> </span> <br /> <!-- Rotated icons modifier class --> <span class="icon is-large has-background-success mt-4"> <span class="mdi mdi-rotate-45 mdi-bell"></span> <span class="mdi mdi-rotate-90 mdi-bell"></span> <span class="mdi mdi-rotate-180 mdi-bell"></span> </span> </div> </div> </body> </html>
Producción:
Iconos de diseño de materiales de Bulma
Referencia: https://versions.bulma.io/0.7.5/documentation/elements/icon/#material-design-icons
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA