📜  布尔玛材料设计图标

📅  最后修改于: 2022-05-13 01:56:27.764000             🧑  作者: Mango

布尔玛材料设计图标

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 0
  • mdi-rotate-90:此类用于将图标旋转 90 0
  • mdi-rotate-180:这个类用于在 180 0处旋转图标。

句法:


    
    ....

示例 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