A. JUDUL
CSS : Menambah Icon (Part 9)
B. PENDAHULUAN
1. Maksud dan Tujuan
- Agar bisa menambahkan icon menggunakan CSS
Bisa paham dalam menambahkan icon menggunakan CSS
C. ALAT DAN BAHAN
- Laptop atau PC
- Koneksi Internet (Mencari Referensi)
- Sublime Text
10 Menit
E. PEMBAHASAN
Kali ini saya akan membahas cara menambah icon, icon disini berguna untuk mempercantik tampilan agar tampilan tidak menjadi sepi karena hanya berisi text saja. Icon juga biasa digunakan untuk menghemat tempat dibanding text. Disini kita akan mempelajari cara menambah icon secara online dan offline
contoh penggunaan secara online.
1. Memakai font awesome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
taruh link diatas di dalam tag head untuk menghubungkan fontawesome ke html
2. Kalian download font awesomenya dan menaruhnya sefolder dan dipanggil.
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
berarti font awesome berada di dalam folder css
pemanggilan icon:<i class="fa fa-car"
hasil:
itu dengan font aweome ada lagi menggunkan bootstrap:
hampir sama cuma berbeda pemanggilan dan linknya.
1. bootstrap secara online:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
2. secara offline sama seperti font awesome kalian download dan panggil dengan link.
Penggunaan:
<i class="glyphicon glyphicon-cloud"></i>
Bedanya disini pemanggilan iconnya menggunakan glyphicon
mungkin kalian bisa langsung mencobanya
F. HASIL YANG DI DAPATKAN
Bisa menambahkan Icon dengan CSS.
G. REFERENSI
Waalaikumusalam wr.wb
Emoticon