Semantic-UI 图标标题内容

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更神奇。 Semantic-UI header 提供了一个简短的内容摘要，它可以包含 3 个内容 Image、Icon 和 Subheader。 Semantic-UI Content 组件很重要，就像没有标题/摘要一样，内容查找过程会浪费很多时间。在本文中，我们现在将介绍图标内容。

语义 UI 标题图标内容类：

• icon：该类用于在标题中包含图标。

句法：

  
  

    ...
  

下面的示例说明了语义 UI 标题图标内容：

示例 1：在本文中，我们将使用普通的书本图标。

HTML

    
    

  

    
        

            GeeksforGeeks
        
        
            Semantic-UI Header Icon Content
        
    
    

    

        
            Geeksforgeeks:
        
        

            Free Tutorials, Millions of Articles, Live,
            Online and Classroom Courses ,Frequent Coding
            Competitions ,Webinars by Industry Experts,
            Internship opportunities and Job Opportunities.
        
  
  
        

        
        
            A Computer Science Portal for
            Geeks
        
    

  

输出：

语义 UI 标题图标内容

示例 2：在此示例中，我们将了解如何设置图标颜色。

HTML

    
    

  


    

    GeeksforGeeks
    
    
     Semantic-UI Header Icon Content
    




    
    Geeksforgeeks:
    
    

        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts,
        Internship opportunities and Job Opportunities.
    
  
  
    

    
    
     A Computer Science Portal for Geeks
    


  

输出：

语义 UI 标题图标内容

参考： https ://semantic-ui.com/elements/header.html#icon