Cara menambahkan ICON pada Website - Pemprograman Web

 

 

Artikel ini akan membahas cara menambahkan icon di website kamu secara online atau offline. kita cukup merubahnya memasukannya melalui tag di HTML dan kita bisa mengatur nya di CSS, mudah bukan?

Contohnya seperti ini :

Menambahkan Icon Secara Online

untuk menambahkan icon secara online kamu perlu melakukan dua hal, bisa dibilang menambahkan icon secara online adalah cara yang paling praktis 

1. MENAMBAHKAN TAG CSS ICON 


<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

Simpan tag itu kedalam tag <head> atau dibawah link .css

2. MASUKAN ICON 


<i class="fa fa-facebook m-l-5" aria-hidden="true"></i>
<i class="fa fa-youtube m-l-5" aria-hidden="true"></i>
<i class="fa fa-whatsapp" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>

Copy kode tersebut kedalam kodingan kalian, dan lihat hasilnya, maka sekarang sudah ada icon Facebook, Youtube WhatsApp dan Instagram, seperti pada gambar diatas.

untuk Warna dan Ukuran bisa kalian sesuaikan di css dengan memanggil tag icon <i>.

Font yang lebih lengkap bisa kalian temukan di situs Fa-icon

Kekurangan memakai icon secara online adalah kalian harus selalu terhubung ke internet agar icon muncul. 

Menambahkan Icon Secara Offline

Kali ini kita akan menambahkan icon secara offline atau lokal. sedikit berdeda dari online yaitu kita harus mendownload dulu pack iconnya

1. Pertama-tama kalian harus mendownload dulu fa-icon nya

2. Jika sudah Extrack dulu file yang telah di download tadi. 

3. Jika sudah, pindahkan folder yang tadi telah di extrack atau folder yang bernama fonts,  kedalam folder project kita, seperti dibawah ini

4. Tambahkan tag icon, posisinya sama seperti yang online yaitu didalam tag <head> atau sesudah link css. kodenya seperti ini


<link rel="stylesheet" type="text/css" 
href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">


5. Selanjutnya adalah memanggil setiap icon. sama seperti menambahkan icon secara online 


<i class="fa fa-facebook m-l-5" aria-hidden="true"></i>
<i class="fa fa-youtube m-l-5" aria-hidden="true"></i>
<i class="fa fa-whatsapp" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>


Kekurangan memakai icon secara online adalah kita harus mendownload icon packnya. artinya seluruh icon ada didalam folder tersebut. namun kita hanya memakai beberapa saja. tentunya sangat tidak efisien karna akan menabah ukuran file.

Mudahkan?

Jangan lupa, buat kamu yang lagi belajar CSS silahkan baca artikel mengenal margin dan padding

« Terbaru
Postingan Lebih Baru
Terlama »
Postingan Lama
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.