Kenhuang Academy
  • English

      • 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 NameIconDescription
      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-facebookfFacebook
      fi-social-twittertTwitter

      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

      <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.