Foundation は、CSS によりスタイルすることのできる 283 のアイコンを提供しています： サイズ、色およびスタイルをコントロールできます。
アイコンは、テキスト、ボタン、ツールバー、ナビゲーション、フォーム 等に使用することができます。.
ここに、Foundation アイコンの例がいくつかあります：
Refresh icon:
Check icon:
Home icon:
アイコンは次の構文で作成します：
<i class="fi-name"></i>
上記の構文で、name の部分はアイコンの適切な名前に置き換える必要があります。
アイコンを使用するには、<head> セクションで Foundation アイコンのスタイルシートに リンクしなければなりません：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
次の例で、アイコンを使用するさまざまな方法を示します：
<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>
結果：
Cloud icon:
Styled Cloud icon:
Home icon:
Home icon on a button:
Home icon on a green button:
Home icon on a large, light blue link button: Home
.icon-bar クラスによりアイコンバーを作成し、アイテムを等間隔に配置するために、
項目数 (.one-up ～ .eight-up) を指定します：
<div class="icon-bar five-up">
<a href="#" class="item">
<i
class="fi-home"></i>
</a>
<a
href="#" class="item">
<i
class="fi-share"></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-magnifying-glass"></i>
</a>
</div>
結果：
アイコンを記述するには、 <label> 要素を使用します：
<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>
結果：
.disabled クラスは、アイコンをクリックできないようにします：
<a href="#" class="item disabled">
<i class="fi-share"></i>
</a>
<a href="#" class="item disabled">
<i
class="fi-mail"></i>
</a>
結果：
.vertical クラスは、縦向きのアイコンバーを作ります：
全アイコンの完全なリファレンスについては、Foundation アイコンリファレンスを 参照してください。