Latest web development tutorials

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 >

嘗試一下»

工具條圖標

我們可以使用.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圖標手冊。