Foundation 圖標
Foundation 提供了283 個圖標,你可以使用css來定義它的樣式尺寸。
圖標可用於文本,按鈕,工具條,導航欄,表單等。
以下是Foundation 圖標的實例:
刷新按鈕:
檢測圖標:
主頁圖標:
圖標語法
創建圖標語法格式如下:
<i class="fi-name"></i>
name部分替換為圖標的名字。
要使用圖標我們需要在<head> 部分添加圖標的樣式文件:
<link rel="stylesheet" href="http://static.w3big.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" 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 >
< 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 >
嘗試一下»
工具條圖標
我們可以使用.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 >
< 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 >
嘗試一下» < 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 >
< i class= "fi-share" > < /i >
< /a >
< a href= "#" class= "item disabled" >
< i class= "fi-mail" > < /i >
< /a >
嘗試一下»
.vertical
類用於創建一個垂直的工具欄:
Foundation 圖標參考手冊
更多關於圖標的內容,可以參考我們的Foundation圖標手冊。