Foundation 圖標 · W3School Foundation 教程

# Foundation 圖標 <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css"> Foundation 提供了 283 個圖標，你可以使用css來定義它的樣式尺寸。圖標可用于文本，按鈕，工具條，導航欄，表單等。以下是 Foundation 圖標的實例：刷新按鈕: 檢測圖標: 主頁圖標: ## 圖標語法創建圖標語法格式如下: ``` ``` _name_ 部分替換為圖標的名字。要使用圖標我們需要在 <head> 部分添加圖標的樣式文件： ``` <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css"> ``` ## Icon 實例以下演示了使用圖標的實例: ### 實例 ``` Cloud icon: Cloud icon as a link: ? <a href="#"></a> Styled Cloud icon: Home icon: Home icon on a button: ? <button type="button" class="button"> ??? Home ? </button> Home icon on a green button: ? <button type="button" class="button success"> ??? Home ? </button> Home icon on a large, light blue link button: ? <a href="#" class="button info large"> ??? Home ? </a> ``` ## 工具條圖標我們可以使用 `.icon-bar` 類來創建一個指定數量的工具欄圖標: ### 實例 ``` <div class="icon-bar five-up"> ? <a href="#" class="item"> ??? ? </a> ? <a href="#" class="item"> ??? ? </a> ? <a href="#" class="item"> ??? ? </a> ? <a href="#" class="item"> ??? ? </a> ? <a href="#" class="item"> ??? ? </a> </div> ``` 圖標描述使用 `<label>` 元素: ### 實例 ``` <div class="icon-bar five-up"> ? <a href="#" class="item"> ??? ??? <label>Home</label> ? </a> ? <a href="#" class="item"> ??? ??? <label>Share</label> ? </a> ? <a href="#" class="item"> ??? ??? <label>Info</label> ? </a> ? <a href="#" class="item"> ??? ??? <label>Mail</label> ? </a> ? <a href="#" class="item"> ??? ??? <label>Search</label> ? </a> </div> ``` `.disabled` 類可以讓圖標變成不可點擊狀態： ### 實例 ``` <a href="#" class="item disabled"> ? </a> <a href="#" class="item disabled"> ??? </a> ``` `.vertical` 類用于創建一個垂直的工具欄： ### 實例 ``` <div class="icon-bar vertical five-up"> ? .... </div> ``` ## Foundation 圖標參考手冊更多關于圖標的內容，可以參考我們的 [Foundation 圖標手冊。](foundation-ref-icons.html) [](foundation-ref-icons.html)