布尔玛材料设计图标

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度响应的。它使用类来实现其设计。

Bulma 框架提供了各种类型的Material Design 图标，如 Fontawesome、ionicons 等，用于开发 Web 应用程序，与所有图标字体库兼容。下面我们将通过尺寸和示例了解如何在 Bulma 中使用 Material Design 图标。我们可以在 Material Design Icons 中创建不同大小的容器，也可以使用下面讨论的一些特定类来修改图标的颜色。

布尔玛材料设计图标类：

mdi：为了在 Bulma 中使用材料设计图标，我们在 span 元素中使用mdi类。

Bulma 材料设计图标容器类列表：

icon：该类用于创建大小为 1.5rem x 1.5rem 的容器。
icon is-small：该类用于创建大小为 1rem x 1rem 的容器。
icon is-medium：此类用于创建大小为 2rem x 2rem 的容器。
icon is-large：该类用于创建大小为 3rem x 3rem 的容器。

Bulma 材料设计图标类列表：

mdi-light：该类用于添加浅色图标。
mdi-dark：该类用于添加深色图标。
mdi-light mdi-inactive：该类用于添加带有浅色非活动颜色的图标。
mdi-dark mdi-inactive：该类用于添加深色非活动颜色的图标。
mdi-flip-h：该类用于水平翻转图标。
mdi-flip-v：该类用于垂直翻转图标。
mdi-rotate-45：此类用于将图标旋转到 45 ⁰ 。
mdi-rotate-90：此类用于将图标旋转 90 ⁰ 。
mdi-rotate-180：这个类用于在 180 ⁰处旋转图标。

句法：


    
    ....

示例 1：以下示例说明了 Bulma Material Design 图标、容器类。

HTML



  

    Bulma Material Design Icons
    
     

  

    
        
            GeeksforGeeks
        
        
            Bulma Material Design icons

HTML



  

    Bulma Material Design Icons
    
     

  

    
        
            GeeksforGeeks
        
        
            Bulma Material Design icons

输出：

布尔玛材料设计图标

示例 2：以下示例说明了 Bulma Material Design Icon 类。

HTML



  

    Bulma Material Design Icons
    
     

  

    
        
            GeeksforGeeks
        
        
            Bulma Material Design icons

输出：

布尔玛材料设计图标

参考： https://versions.bulma.io/0.7.5/documentation/elements/icon/#material-design-icons