❮ Foundation Buttons Foundation Ref Helpers ❯

Foundation Icons

Foundation offers 283 icons, which you can style and resize using CSS.

Icons can be used in text, buttons, toolbars, navigation bars, forms, and more.

Here are some examples of Foundation icons:

Refresh button: * * **

Check icon: * * **

Home icon: * * **

Icon Syntax

The syntax for creating an icon is as follows:

<i class="fi-name"></i>

Replace name with the name of the icon.

To use icons, we need to add the icon style file in the <head> section:

<link rel="stylesheet" href="http://static.tutorialpro.org/assets/foundation-icons/foundation-icons.css">

Icon Examples

Here are some examples of using icons:

Example

<p>Cloud icon: <i class="fi-cloud"></i></p> <p>Cloud icon as a link:
     
    <a href="#"><i class="fi-cloud"></i></a></p><p>Styled Cloud icon: <i 
    class="fi-cloud" style="font-size:35px;color:red;"></i></p> <p>Home 
    icon: <i class="fi-home"></i></p><p>Home icon on a button:  <button 
    type="button" class="button">    <i class="fi-home"></i> Home   </button>
    </p><p>Home icon on a green button:  <button type="button" 
    class="button success">    <i class="fi-home"></i> Home   </button>
    </p><p>Home icon on a large, light blue link button:  <a href="#" 
    class="button info large">    <i class="fi-home"></i> Home   </a></p>

Toolbar Icons

We can use the .icon-bar class to create a toolbar with a specified number of icons:

Example

<div class="icon-bar five-up">  <a href="#" class="item">    <i 
    class="fi-home"></i>  </a>  <a 
    href="#" class="item">    <i 
    class="fi-bookmark"></i>  </a>  <a 
    href="#" class="item">    <i 
    class="fi-info"></i>  </a>  <a 
    href="#" class="item">    <i class="fi-mail"></i>
     
    </a>  <a href="#" class="item">    <i class="fi-like"></i>  </a></div>

Icon descriptions use the <label> element:

Example

<div class="icon-bar five-up">  <a href="#" class="item">    <i 
    class="fi-home"></i>    
    <label>Home</label>  </a>  <a 
    href="#" class="item">    <i 
    class="fi-share"></i>    
    <label>Share</label>  </a>  <a 
    href="#" class="item">    <i 
    class="fi-info"></i>    
    <label>Info</label>  </a>  <a 
    href="#" class="item">    <i class="fi-mail"></i>    
    <label>Mail</label>
     
    </a>  <a href="#" class="item">    <i class="fi-magnifying-glass"></i>    
    <label>Search</label>  </a></div>

The .disabled class can make icons unclickable:

Example

<a href="#" class="item disabled">  <i class="fi-share"></i>
    </a>
    <a href="#" class="item disabled">    <i 
    class="fi-mail"></i></a>

The .vertical class is used to create a vertical toolbar:

Example

&lt;div class="icon-bar 
    vertical five-up">  ....</div>

Foundation Icons Reference Manual

For more information about icons, refer to our Foundation Icons Manual.

❮ Foundation Buttons Foundation Ref Helpers ❯