Foundation Icons

The Foundation framework doesn't include a built-in icon library, but it can be easily integrated with various icon libraries. This chapter covers how to use icons in Foundation, including Foundation Icon Fonts 3 and other popular icon libraries.

Foundation Icon Fonts 3

Foundation Icon Fonts 3 is the official icon font library provided by ZURB, containing hundreds of commonly used icons.

Installing Foundation Icons

Method 1: CDN Import

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">

Method 2: Download and Install

1. Download from Zurb Foundation Icons
2. Extract files to your project directory
3. Import the CSS file

<link rel="stylesheet" href="css/foundation-icons.css">

Basic Usage

Use the <i> tag with class names prefixed by fi-:

<i class="fi-home"></i> Home
<i class="fi-mail"></i> Mail
<i class="fi-heart"></i> Favorite
<i class="fi-star"></i> Rating

Common Icon List

Class Name	Icon	Description
fi-home	🏠	Home
fi-mail	✉️	Mail
fi-heart	❤️	Heart
fi-star	⭐	Star
fi-magnifying-glass	🔍	Search
fi-plus	➕	Add
fi-minus	➖	Minus
fi-x	✖️	Close
fi-check	✓	Confirm
fi-arrow-right	→	Right Arrow
fi-arrow-left	←	Left Arrow
fi-upload	⬆️	Upload
fi-download	⬇️	Download
fi-trash	🗑️	Delete
fi-pencil	✏️	Edit
fi-widget	⚙️	Settings
fi-lock	🔒	Lock
fi-unlock	🔓	Unlock
fi-social-facebook	f	Facebook
fi-social-twitter	t	Twitter

Icon Sizes

Control icon size through CSS:

<style>
    .icon-small { font-size: 12px; }
    .icon-medium { font-size: 24px; }
    .icon-large { font-size: 36px; }
    .icon-xlarge { font-size: 48px; }
</style>

<i class="fi-home icon-small"></i>
<i class="fi-home icon-medium"></i>
<i class="fi-home icon-large"></i>
<i class="fi-home icon-xlarge"></i>

Icon Colors

Set colors using CSS color property:

<style>
    .icon-primary { color: #1779ba; }
    .icon-success { color: #3adb76; }
    .icon-warning { color: #ffae00; }
    .icon-alert { color: #cc4b37; }
</style>

<i class="fi-heart icon-primary"></i>
<i class="fi-heart icon-success"></i>
<i class="fi-heart icon-warning"></i>
<i class="fi-heart icon-alert"></i>

Using Font Awesome

Font Awesome is one of the most popular icon libraries, offering a rich selection of icons.

Installing Font Awesome

<!-- Font Awesome 5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- Or Font Awesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Basic Usage

<!-- Solid icons -->
<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-cog"></i>

<!-- Regular icons -->
<i class="far fa-heart"></i>
<i class="far fa-star"></i>

<!-- Brand icons -->
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>

Font Awesome Size Classes

<i class="fas fa-home fa-xs"></i>    <!-- 0.75em -->
<i class="fas fa-home fa-sm"></i>    <!-- 0.875em -->
<i class="fas fa-home"></i>          <!-- 1em -->
<i class="fas fa-home fa-lg"></i>    <!-- 1.33em -->
<i class="fas fa-home fa-2x"></i>    <!-- 2em -->
<i class="fas fa-home fa-3x"></i>    <!-- 3em -->
<i class="fas fa-home fa-5x"></i>    <!-- 5em -->
<i class="fas fa-home fa-7x"></i>    <!-- 7em -->
<i class="fas fa-home fa-10x"></i>   <!-- 10em -->

Icons with Buttons

Buttons with Icons

<a class="button" href="#">
    <i class="fi-home"></i> Home
</a>

<a class="button success" href="#">
    <i class="fi-check"></i> Confirm
</a>

<a class="button alert" href="#">
    <i class="fi-trash"></i> Delete
</a>

Icon-Only Buttons

<a class="button" href="#" aria-label="Home">
    <i class="fi-home"></i>
</a>

<a class="button secondary" href="#" aria-label="Settings">
    <i class="fi-widget"></i>
</a>

<a class="button alert" href="#" aria-label="Delete">
    <i class="fi-trash"></i>
</a>

Icon Button Groups

<div class="button-group">
    <a class="button secondary" aria-label="Bold"><i class="fi-bold"></i></a>
    <a class="button secondary" aria-label="Italic"><i class="fi-italic"></i></a>
    <a class="button secondary" aria-label="Underline"><i class="fi-underline"></i></a>
</div>

Icons with Forms

Input Field Prefix Icons

<div class="input-group">
    <span class="input-group-label">
        <i class="fi-mail"></i>
    </span>
    <input class="input-group-field" type="email" placeholder="Enter email">
</div>

<div class="input-group">
    <span class="input-group-label">
        <i class="fi-lock"></i>
    </span>
    <input class="input-group-field" type="password" placeholder="Enter password">
</div>

<div class="input-group">
    <span class="input-group-label">
        <i class="fi-magnifying-glass"></i>
    </span>
    <input class="input-group-field" type="search" placeholder="Search...">
    <div class="input-group-button">
        <button class="button" type="submit">Search</button>
    </div>
</div>

Icons with Navigation

Navigation Menu Icons

<ul class="menu">
    <li><a href="#"><i class="fi-home"></i> Home</a></li>
    <li><a href="#"><i class="fi-page"></i> Articles</a></li>
    <li><a href="#"><i class="fi-photo"></i> Gallery</a></li>
    <li><a href="#"><i class="fi-mail"></i> Contact</a></li>
</ul>

Vertical Navigation with Icons

<ul class="vertical menu">
    <li><a href="#"><i class="fi-home"></i> Home</a></li>
    <li><a href="#"><i class="fi-torso"></i> Profile</a></li>
    <li><a href="#"><i class="fi-widget"></i> Settings</a></li>
    <li><a href="#"><i class="fi-power"></i> Logout</a></li>
</ul>

Icon Animations

Rotating Icons

<style>
    .icon-spin {
        animation: spin 2s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
</style>

<i class="fi-loop icon-spin"></i> Loading...

Pulsing Icons

<style>
    .icon-pulse {
        animation: pulse 1s ease-in-out infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
</style>

<i class="fi-heart icon-pulse" style="color: red;"></i>

Font Awesome Animation Classes

<!-- Spin -->
<i class="fas fa-spinner fa-spin"></i>

<!-- Pulse spin -->
<i class="fas fa-spinner fa-pulse"></i>

Icon Stacking

Font Awesome Stacking

<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>

Social Media Icons

<div class="social-icons">
    <a href="#" class="button hollow" aria-label="Facebook">
        <i class="fi-social-facebook"></i>
    </a>
    <a href="#" class="button hollow" aria-label="Twitter">
        <i class="fi-social-twitter"></i>
    </a>
    <a href="#" class="button hollow" aria-label="LinkedIn">
        <i class="fi-social-linkedin"></i>
    </a>
    <a href="#" class="button hollow" aria-label="GitHub">
        <i class="fi-social-github"></i>
    </a>
</div>

<style>
    .social-icons .button {
        margin: 0 5px;
        font-size: 24px;
    }
</style>

Complete Example

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Icons Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .icon-demo { font-size: 24px; margin: 10px; display: inline-block; }
        .icon-demo i { margin-right: 5px; }
        .demo-section { margin-bottom: 30px; }
        .icon-grid { display: flex; flex-wrap: wrap; }
        .icon-item {
            width: 120px;
            text-align: center;
            padding: 15px;
            margin: 5px;
            background: #f4f4f4;
            border-radius: 4px;
        }
        .icon-item i { font-size: 32px; display: block; margin-bottom: 10px; }
        .icon-item span { font-size: 12px; color: #666; }
        .icon-spin { animation: spin 2s linear infinite; }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Icons Showcase</h1>

        <div class="demo-section">
            <h2>Foundation Icons</h2>
            <div class="icon-grid">
                <div class="icon-item">
                    <i class="fi-home"></i>
                    <span>fi-home</span>
                </div>
                <div class="icon-item">
                    <i class="fi-mail"></i>
                    <span>fi-mail</span>
                </div>
                <div class="icon-item">
                    <i class="fi-heart"></i>
                    <span>fi-heart</span>
                </div>
                <div class="icon-item">
                    <i class="fi-star"></i>
                    <span>fi-star</span>
                </div>
                <div class="icon-item">
                    <i class="fi-magnifying-glass"></i>
                    <span>fi-magnifying-glass</span>
                </div>
                <div class="icon-item">
                    <i class="fi-widget"></i>
                    <span>fi-widget</span>
                </div>
                <div class="icon-item">
                    <i class="fi-trash"></i>
                    <span>fi-trash</span>
                </div>
                <div class="icon-item">
                    <i class="fi-pencil"></i>
                    <span>fi-pencil</span>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>Icon Sizes</h2>
            <i class="fi-home" style="font-size: 16px;"></i>
            <i class="fi-home" style="font-size: 24px;"></i>
            <i class="fi-home" style="font-size: 32px;"></i>
            <i class="fi-home" style="font-size: 48px;"></i>
            <i class="fi-home" style="font-size: 64px;"></i>
        </div>

        <div class="demo-section">
            <h2>Icon Colors</h2>
            <i class="fi-heart" style="font-size: 32px; color: #1779ba;"></i>
            <i class="fi-heart" style="font-size: 32px; color: #3adb76;"></i>
            <i class="fi-heart" style="font-size: 32px; color: #ffae00;"></i>
            <i class="fi-heart" style="font-size: 32px; color: #cc4b37;"></i>
        </div>

        <div class="demo-section">
            <h2>Buttons with Icons</h2>
            <a class="button" href="#"><i class="fi-home"></i> Home</a>
            <a class="button success" href="#"><i class="fi-check"></i> Save</a>
            <a class="button warning" href="#"><i class="fi-pencil"></i> Edit</a>
            <a class="button alert" href="#"><i class="fi-trash"></i> Delete</a>
        </div>

        <div class="demo-section">
            <h2>Icon Button Groups</h2>
            <div class="button-group">
                <a class="button secondary"><i class="fi-bold"></i></a>
                <a class="button secondary"><i class="fi-italic"></i></a>
                <a class="button secondary"><i class="fi-underline"></i></a>
            </div>
            &nbsp;
            <div class="button-group">
                <a class="button secondary"><i class="fi-align-left"></i></a>
                <a class="button secondary"><i class="fi-align-center"></i></a>
                <a class="button secondary"><i class="fi-align-right"></i></a>
            </div>
        </div>

        <div class="demo-section">
            <h2>Form Icons</h2>
            <div class="input-group">
                <span class="input-group-label"><i class="fi-mail"></i></span>
                <input class="input-group-field" type="email" placeholder="Enter email">
            </div>
            <div class="input-group">
                <span class="input-group-label"><i class="fi-lock"></i></span>
                <input class="input-group-field" type="password" placeholder="Enter password">
            </div>
        </div>

        <div class="demo-section">
            <h2>Animated Icons</h2>
            <i class="fi-loop icon-spin" style="font-size: 32px;"></i>
            <span style="margin-left: 10px;">Loading...</span>
        </div>

        <div class="demo-section">
            <h2>Font Awesome Icons</h2>
            <i class="fas fa-home fa-2x"></i>
            <i class="fas fa-user fa-2x"></i>
            <i class="fas fa-cog fa-2x"></i>
            <i class="far fa-heart fa-2x"></i>
            <i class="fab fa-github fa-2x"></i>
            <i class="fas fa-spinner fa-spin fa-2x"></i>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

Icon Best Practices

1. Accessibility: Always add aria-label or title attributes to icon-only elements
2. Decorative icons: Decorative icons should have aria-hidden="true"
3. Semantics: Choose icons that match their function
4. Consistency: Use the same icon library throughout the project
5. Performance: Only import the icons you need, consider using SVG icons

<!-- Functional icons - need accessibility -->
<button aria-label="Delete item">
    <i class="fi-trash" aria-hidden="true"></i>
</button>

<!-- Decorative icons - hidden from screen readers -->
<a href="#">
    <i class="fi-mail" aria-hidden="true"></i> Send Email
</a>

Summary

In this chapter we learned:

• Installation and usage of Foundation Icon Fonts 3
• Integration of Font Awesome icon library
• Controlling icon sizes and colors
• Combining icons with buttons, forms, and navigation
• Icon animation effects
• Accessibility best practices for icons

Next chapter, we will learn Foundation Labels.

---

Tip: When choosing an icon library, consider project requirements, file size, and maintenance costs. For small projects, consider using SVG icons to reduce HTTP requests.