📜  基础 CSS 标签图标

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

基础 CSS 标签图标

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架,可以轻松设计美观的响应式网站、应用程序和电子邮件,这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用,例如 Facebook、eBay、Mozilla、Adobe,甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI,因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具,用于在移动设备上更快地呈现。

标签是用户界面中项目的标题,即,它提供指定字段的元数据。可以使用特定的 Foundation CSS 类对其进行样式设置。

图标是图形符号,每个都带有特殊含义并用于特定目的。为了使用图标类,请在 标记中使用“ fa ”后跟图标名称来声明该类。

基础 CSS 标签图标类:

  • label:该类用于创建标签 & 一般与内联元素一起使用。
  • fi-iconname* :该类用于通过指定类名来添加不同的图标标签。

有关其他图标类的详细说明,请参阅基础图标页面。

句法:


    ...

示例 1:这是一个基本示例,说明 Foundation CSS 中的普通标签图标。

HTML


  

    
        Foundation CSS Label Icons
    
      
    
    
    

  

    
        

GeeksforGeeks

            Foundation CSS Label Icons         
                        Magnifying Glass                                 Github                                 Zoom-out                                 Bluetooth                                 Mail                


HTML


  

    
        Foundation CSS Label Icons
    
      
    
    
     

  

    
        

GeeksforGeeks

        Foundation CSS Label Icons         
                        Close                                Close                                Widget                                Folder                                Share              


输出:

基础 CSS 标签图标

示例 2:这是一个基本示例,说明 Foundation CSS 中的彩色标签图标。

HTML



  

    
        Foundation CSS Label Icons
    
      
    
    
     

  

    
        

GeeksforGeeks

        Foundation CSS Label Icons         
                        Close                                Close                                Widget                                Folder                                Share              

输出:

基础 CSS 标签图标

参考: https://get.foundation/sites/docs/label.html#icons