Yayasan Icon
Foundation menyediakan 283 ikon, Anda dapat menentukan ukuran gaya menggunakan css.
Ikon dapat digunakan untuk teks, tombol, toolbar, navigasi, bentuk, dan sebagainya.
Berikut ini adalah contoh dari Yayasan ikon:
Tombol menyegarkan:
Ikon Deteksi:
ikon rumah:
icon sintaks
Membuat ikon sintaks adalah sebagai berikut:
<i class="fi-name"></i>
Ganti icon nama bagian dari nama.
Untuk menggunakan ikon kita membutuhkan <head> untuk menambahkan file icon style:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
Contoh ikon
Contoh berikut menunjukkan penggunaan ikon:
contoh
<P> ikon Cloud sebagai link :
<A Href = "#"> <i class = "fi-awan"> </ i> </ a>
</ P>
ikon <P> Gaya Cloud: < i class = "fi-awan" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> ikon Home: <i class = "fi-rumah"> </ i> </ p>
<P> ikon Home pada tombol :
<Jenis Tombol = "tombol" class = "button">
<I class = "fi-rumah "> </ i> Home
</ Tombol>
</ P>
<P> ikon Home pada hijau tombol:
<Jenis Tombol = "tombol" class = "button sukses">
<I class = "fi-rumah "> </ i> Home
</ Tombol>
</ P>
<P> ikon Home pada besar , tombol link biru:
<A Href = "#" class = Info "button large">
<I class = "fi-rumah "> </ i> Home
</ A>
</ P>
Coba »
ikon toolbar
Kita dapat menggunakan .icon-bar
kelas untuk membuat sejumlah tertentu dari ikon toolbar:
contoh
<A Href = "#" class = "item">
<I class = "fi-rumah "> </ 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-seperti "> </ i>
</ A>
</ Div>
Coba »
Ikon Keterangan Gunakan <label>
elemen:
contoh
<A Href = "#" class = "item">
<I class = "fi-rumah "> </ 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-pembesar -kaca"> </ i>
<Label> Cari </ label>
</ A>
</ Div>
.disabled
kelas memungkinkan menjadi tidak dapat diklik ikon status:
contoh
<I class = "fi-share "> </ i>
</ A>
<A Href = "#" class = "item disabled">
<I class = "fi-mail "> </ i>
</ A>
Coba »
.vertical
kelas digunakan untuk membuat toolbar vertikal:
Pedoman Yayasan Icon Referensi
Lebih lanjut tentang isi dari ikon, Anda dapat merujuk ke kami petunjuk ikon Foundation.