建站
咨詢
售后
建站咨詢
新聞中心
Foundation 圖標
Foundation 提供了 283 個圖標，你可以使用css來定義它的樣式尺寸。
成都創(chuàng)新互聯公司專業(yè)為企業(yè)提供越城網站建設、越城做網站、越城網站設計、越城網站制作等企業(yè)網站建設、網頁設計與制作、越城企業(yè)網站模板建站服務，十載越城做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。
圖標可用于文本，按鈕，工具條，導航欄，表單等。
以下是 Foundation 圖標的實例：
刷新按鈕:
檢測圖標:
主頁圖標:
圖標語法
創(chuàng)建圖標語法格式如下:
name 部分替換為圖標的名字。
要使用圖標我們需要在
部分添加圖標的樣式文件：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 類來創(chuàng)建一個指定數量的工具欄圖標:
實例
<
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
>
嘗試一下 ?
圖標描述使用 元素:
實例
<
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 類可以讓圖標變成不可點擊狀態(tài)：
實例
<
a
href=
"#"
class=
"item disabled"
>
<
i
class=
"fi-share"
>
<
/i
>
<
/a
>
<
a
href=
"#"
class=
"item disabled"
>
<
i
class=
"fi-mail"
>
<
/i
>
<
/a
>
嘗試一下 ?
.vertical 類用于創(chuàng)建一個垂直的工具欄：
實例
<
div
class=
"icon-bar vertical five-up"
>
....
<
/div
>
嘗試一下 ?
Foundation 圖標參考手冊
更多關于圖標的內容，可以參考我們的 Foundation 圖標手冊。
網頁標題：創(chuàng)新互聯Foundation教程：Foundation圖標
網站鏈接：http://www.5511xx.com/article/dpepdco.html
