#5 Cara Menggunakan FONT AWESOME pada Bootstrap

Tutorial kali ini kita akan menggunakan beberapa fitur yang banyak digunakan dalam Web Design yaitu font Awesome

Font Awesome adalah kumpulan icon atau simbol yang dapat kita gunakan untuk web design selanjutnya klik font awesome disini yang dapat digunakan untuk memperindah tampilan website anda

untuk menghubungkan website kita bisa menggunakan cara Online dan offline 

Menghubungkan Font Awesome ke website secara online sebagai berikut :

langsung saja ke font awesome dan klik "Start"

Selanjutnya masukan email untuk mendapatkan code yang dapat digunakan untuk menyambungkan font awesome dengan website anda

akan masuk notifikasi kemudian klik dan lengkapi datanya

selanjutnya buka file index.html  paste skrip tadi pada

        <script src="https://kit.fontawesome.com/8e23d86a11.js" crossorigin="anonymous"></script>

selanjutnya font Awesome sudah bisa digunakan
cara menggunakan Font Awesome pilih Icon-nya disini
misalnya saya pilih Youtube, copy Skripnya

Icon Youtube, Instagram dan Search

Bootstrap sudah menyedaiakan untuk merubah margin agar tidak terlalu mepet misalnya :
margin left maka yang ditulliskan ml-3
dan tambah margin-top nya menjadi mt-2

Untuk merubah ukuran icon menggunakan class fa-...........

untuk memperbesar ukuran dengan menambahkan skrip sebelum nama class Fab dengan mengetikan fa-1x

<li>
 <i class="fa-2x fab fa-youtube text-white ml-3 mt-2"></i>
 <i class="fa-2x fab fa-instagram text-white ml-3 mt-2"></i>
 <i class="fa-2x fas fa-search text-white ml-3 mt-2"></i>
</li>

Merubah Warna Icon menggunakan CSS, caranya kita panggil dulu Class Icon nya

.fa-youtube {
 color: red;
}

Apabila tidak berubah maka anda harus hapus terlebih dahulu warna pada simbol yang sebelumnya dituliskan pada index.html pada class fa-youtube dll

Selanjutnya apabila ingin menghubungkan icon secara offline maka yang dilakukan adalah kembali ke halaman awal Font Awesome dan pilih Download dan klik Free for Web

dan masukan linknya

<link rel="stylesheet" type="text/css" href="fontawesome-free/css/all.min.css">

Save dan apabila sudah berhasil maka icon akan tetap muncul pada websitenya