Latest web development tutorials

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: <i class = "fi-awan"> </ i> </ p>
<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

<Div class = "icon-bar lima-up">
<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

<Div class = "icon-bar lima-up">
<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>
Coba »

.disabled kelas memungkinkan menjadi tidak dapat diklik ikon status:

contoh

<A Href = "#" class = "item disabled">
<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:

contoh

<Div class = "icon-bar vertikal lima-up">
....
</ Div>

Coba »

Pedoman Yayasan Icon Referensi

Lebih lanjut tentang isi dari ikon, Anda dapat merujuk ke kami petunjuk ikon Foundation.