Rabu, 11 Januari 2017

Belajar CSS Part 13 : CSS Ikon

CSS IKON


 Assalamu'alaikum Wr. Wb

Hai sobat semua, terima kasih telah mengunjungi blog saya ini. Pada kesempatan sebelumnya kita sudah belajar mengenai CSS Text, nah untuk kali ini kita kan lanjut ke materi selanjutnya yaitu Ikon pada CSS.

Langsung saja yuk...

Untuk menggunakan Ikon pada CSS, tambahkan sript berikut ini kedalam <head> :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Contoh :


Hasilnya :



 BOOTSTRAP ICONS
Untuk menggunakan glyphicons Bootstrap, tambahkan script berikut ini ke dalam <head> :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Contoh :


Hasilnya :




GOOGLE ICONS
Untuk menggunakan ikon Google, tambahkan script berikut ini kedalam <head> :
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Contoh :





Hasilnya :



Silakan dicoba sendiri sobat. Apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima Kasih.


  • Kesimpulan
Untuk menambahkan icons pada CSS, kita harus memasukan script yang berisi link font kedalam tag <head>. Kemudian kita hanya tinggal memanggil nama dari ikon yang ingin kita gunakan kedalam elemen <i> dengan menggunakan class.

Referensi :
http://www.w3schools.com/css/css_icons.asp

 Wassalamu'alaikum Wr. Wb
di

Tidak ada komentar:

Posting Komentar