Foundation CSS Label Icons

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.

Output:

👁 Foundation CSS Label Icons

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

Output:

👁 Foundation CSS Label Icons

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