Foundation 圖標
Foundation 提供了 283 個圖標，你可以使用css來定義它的樣式尺寸。
圖標可用於文本，按鈕，工具條，導航欄，表單等。
以下是 Foundation 圖標的實例：
刷新按鈕:
檢測圖標:
主頁圖標:
圖標語法
創建圖標語法格式如下:
<i class="fi-name"></i>
name 部分替換為圖標的名字。
要使用圖標我們需要在 <head> 部分添加圖標的樣式文件：
<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
Icon 實例
以下演示了使用圖標的實例:
實例
<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" stylex="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>
工具條圖標
我們可以使用 .icon-bar 類來創建一個指定數量的工具欄圖標:
實例
<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>
圖標描述使用 <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 類用於創建一個垂直的工具欄：
實例
<div class="icon-bar vertical five-up">
....
</div>
※Foundation 按鈕
※Foundation 按鈕組
※Foundation 標籤
※Foundation 提醒框
※Font Awesome 圖標
TAG:程序員小新人學習 |
※該怎麼玩兒？The Foundation of Learning
※粉底測評＃Dior forever undercover 24h foundation
※PH7現場 Blue Foundation
※蘋果 FoundationDB 開源 CloudKit 使用的數據層
※mac fix studio foundation nc15 and嘮嗑哈哈哈
※阿什莉·比克頓將參展K11 Art Foundation群展Emerald City
※Royal Foundation懷孕時尚抓拍欣賞
※Unity：AR Foundation將支持ARKit 3
※世界智能駕駛挑戰賽：AutoCore受邀代表Autoware Foundation參賽
※Apple的雲資料庫FoundationDB現在開源
※Unity AR Foundation開始支持ARKit 3.0
※大健康鏈BHIC獲得Misitour foundation千萬美元戰略投資
※重磅！羅氏24億美元收購Foundation Medicine
※蘋果開源NoSQL 資料庫FoundationDB
※如何看待FoundationDB資料庫發展前景？
※滑板 | Foundation壓軸滑手Cole Wilson-滑板的一天！
※CoreLink推出Foundation 3D列印鈦金屬植入體多孔籠式系統
※三言財經與Global Blockchain Foundation達成戰略合作，成為其中國首家戰略合作媒體
※羅氏155億與Foundation Medicine達成併購協議，全面進軍癌症基因檢測行業！
※Unity為iOS和安卓打造AR開發軟體：AR Foundation