📌  相关文章
📜  如何在使用 HTML 和 CSS 的网页中使用 Google Material icon 作为列表样式?

📅  最后修改于: 2021-11-07 08:03:30             🧑  作者: Mango

图标可以从图标库添加到我们的 HTML 页面。库中的所有图标都可以使用 CSS 进行格式化。它们可以根据大小、颜色、阴影等进行定制。它们在实现 CSS 中扮演着重要的角色。 Materialize CSS 提供了丰富的google材质图标集,可以从Material Design specs下载。

库和用法:要使用这些图标,在 HTML 代码的 部分添加以下行。

HTML


HTML


HTML


HTML
 
 

    
    
      
    
 
 
    
        

              GeeksForGeeks         

      
                

        List with bullet style:     

       
            
  • Geek 1
  •         
  • Geek 2
  •         
  • Geek 3
  •     
                  

        List with icon as style:     

       
            
  • Geek 1
  •         
  • Geek 2
  •         
  • Geek 3
  •     
   


然后要使用图标,在 HTML 元素的 部分提供图标的名称。

add

要了解有关具体化 CSS 的更多信息,请参阅以下文章:

Materialize CSS Icons 在本文中,我们将学习如何将这些图标用作列表样式。

  • 首先,我们将通过将list-style-type 设置none来删除默认列表样式。

    HTML

    
    
  • 然后我们将使用li:before样式在列表值之前添加内容并添加材质图标作为内容。

    HTML

    
    

此样式将向所有列表内容添加右箭头图标。

最终代码:

HTML

 
 

    
    
      
    
 
 
    
        

              GeeksForGeeks         

      
                

        List with bullet style:     

       
            
  • Geek 1
  •         
  • Geek 2
  •         
  • Geek 3
  •     
                  

        List with icon as style:     

       
            
  • Geek 1
  •         
  • Geek 2
  •         
  • Geek 3
  •     
   

输出: