Foundation CSS Label Icons

Last Updated : 07 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Labels are the caption for an item in a user interface ie., it provides the metadata for the specified field. It can be styled using the particular Foundation CSS classes.

An Icons are graphical symbols with each carrying a special meaning and used for a specific purpose. In order to use the icon class, declare the class with “fa” followed by the icon name in the <i> tag.

Foundation CSS Label Icon Class:

label: This class is used to create a label & is generally used with inline elements.
fi-iconname*: This class is used to add different icon labels by specifying the class name.

Please refer to the Foundation Icon page for the detailed description related to the other icon classes.

Syntax:

<span class="label color-class">
    <i class="icon-class"></i>...
</span>

Example 1: This is a basic example illustrating normal label icons in Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Label Icons 
    </title> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" 
          href= 
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
            <strong>Foundation CSS Label Icons</strong> 
        <br>  
        <span class="label"> 
            <i class="fi-magnifying-glass"></i> Magnifying Glass 
        </span>  
        <span class="label"> 
            <i class="fi-social-github"></i> Github 
        </span>  
        <span class="label"> 
            <i class="fi-zoom-out"></i> Zoom-out 
        </span>  
        <span class="label"> 
            <i class="fi-bluetooth"></i> Bluetooth 
        </span>  
        <span class="label"> 
            <i class="fi-mail"></i> Mail  
        </span>  
    </center> 
</body> 
</html>

Output:

Foundation CSS Label Icons

Example 2: This is a basic example illustrating colored label icons in Foundation CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Label Icons 
    </title> 
      
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" 
          href= 
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />  
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <strong>Foundation CSS Label Icons</strong> 
        <br>  
        <span class="label primary"> 
            <i class="fi-x-circle"></i> Close 
        </span> 
        <span class="label alert"> 
            <i class="fi-x"></i> Close 
        </span> 
        <span class="label warning"> 
            <i class="fi-widget"></i> Widget 
        </span> 
        <span class="label success"> 
            <i class="fi-folder"></i> Folder 
        </span> 
        <span class="label secondary"> 
            <i class="fi-share"></i> Share 
        </span> 
    </center> 
</body> 
</html>