Foundation CSS Badge 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 layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. It is utilized by many groups including Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is constructed on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It additionally comes with CLI, so it’s easy to apply with module bundlers. It gives the Fastclick.js tool for quicker rendering on mobile devices.
Badges are the basic component that is used to display an indicator or count a number, ie., the number of unread items. It helps to match the size of the immediate parent elements with relative font sizes. Foundation CSS generally uses .badge class with the <span> element to create badges.
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 Badge Icon Class:
- badge: This class is used to create a badge to add to the element.
- fi-iconname*: This class is used to specify the particular icon to be displayed, according to the class used.
Syntax:
<span class="badge color-class">
<i class="icon-class"></i>
</span>
Please refer to the Foundation Icon page for the detailed description related to the other icon classes.
Example 1: This is a basic example illustrating Badge Icons in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Badge Icons</title>
<link rel="stylesheet"
href=
<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 Badge Icons</strong>
<br>
<span class="badge">
<i class="fi-share"></i>
</span>
<span class="badge">
<i class="fi-check"></i>
</span>
<span class="badge">
<i class="fi-wrench"></i>
</span>
<span class="badge">
<i class="fi-sheriff-badge"></i>
</span>
<span class="badge">
<i class="fi-pencil"></i>
</span>
<span class="badge">
<i class="fi-shield"></i>
</span>
<span class="badge">
<i class="fi-page"></i>
</span>
<span class="badge">
<i class="fi-social-dribbble"></i>
</span>
<span class="badge">
<i class="fi-shopping-cart"></i>
</span>
<span class="badge">
<i class="fi-target-two"></i>
</span>
</center>
</body>
</html>
|
Output:
Example 2: This is a basic example illustrating colored Badge Icons in Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Foundation CSS Badge Icons
</title>
<link rel="stylesheet"
href=
<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 Badge Icons</strong>
<br>
<span class="badge primary">
<i class="fi-share"></i>
</span>
<span class="badge secondary">
<i class="fi-check"></i>
</span>
<span class="badge success">
<i class="fi-wrench"></i>
</span>
<span class="badge alert">
<i class="fi-sheriff-badge"></i>
</span>
<span class="badge primary">
<i class="fi-pencil"></i>
</span>
<span class="badge warning">
<i class="fi-shield"></i>
</span>
<span class="badge success">
<i class="fi-page"></i>
</span>
<span class="badge alert">
<i class="fi-social-dribbble"></i>
</span>
<span class="badge warning">
<i class="fi-shopping-cart"></i>
</span>
<span class="badge secondary">
<i class="fi-target-two"></i>
</span>
</center>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/badge.html#icons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...