Cara Memasang Font Awesome Untuk Penggunaan Ikon di Blog
GAWARIBLOG-Font Awesome adalah Framework CSS yang sangat membantu banyak developer untuk penggunaan ikon. Jadi mereka tidak perlu repot-repot membuat ikon sendiri.
Tinggal memanggil dari website Fontawesome sudah bisa memakai beragam ikon yang disediakan.
1. Kunjungi alamat web resmi Font Awesome.
2. Plih Tombol Start Using Free.
3. Copy Kode Kit yang kamu dapatkan.
4. Nah selanjutnya kamu buka akun blogger pergi ke pengaturan tema HTML.
Cari kode </head> dan pastekan kode kit tadi tepat DI ATAS </head>.
5. Klik SIMPAN. Dari sini kita sudah berhasil meng-install Font Awesome di Blog.
1. Buka Web Font Awesome.
2. Klik menu Icons. Untuk melihat daftar koleksi ikon.
3. Lalu sebagai contoh ketikkan kata "Laptop". Lalu Klik ikon Laptopnya.
4. Selanjutnya akan muncul kode unicode dan kode HTML untuk penggunaan icon.
Lalu bagaimana cara menambahkannya dalam penulisan html di Blog.
Ada banyak cara, misal cara dibawah ini.
Cara Memasang ikon Font Awesome melalui HTML
Cara untuk memasang ikon Font Awesome melalui HTML adalah dengan menuliskannya ke dalam tag berjenis inline seperti i dan span. Hampir sebagian besar lebih memilih menggunakan i, di websitenya pun dicontohkan menggunakan i, jadi kita pun akan memakai tag tersebut (berhubung penulisannya lebih pendek juga sih).Berdasarkan penjelasan di atas, maka yang harus kamu lakukan adalah menuliskan tag HTML i dan menambahkan nama class dari ikon ke dalamnya. Dimana nama class ini berawalan fas (dulu menggunakan fa namun dimatikan dalam Font Awesome versi 5).
Contohnya seperti ini:
Mengubah Ukuran
Untuk mengubah ukuran tinggal menambahkan class lain yaitu
"fa-xs", "fa-sm", "fa-2x", "fa-3x", "fa-4x", "fa-5x", "fa-6x", "fa-7x", "fa-8x", "fa-9x", "fa-10x".
Contohnya
Mudahkan Cara Memasang Font Awesome Untuk Penggunaan Ikon di Blog ini. Kamu bisa mengkreasikan semua yang ada dengan Font Awesome.
Tinggal memanggil dari website Fontawesome sudah bisa memakai beragam ikon yang disediakan.
Cara Memasang Font Awesome Untuk Penggunaan Ikon di Blog
Dalam penggunaanya Font Awesome ini memiliki kelebihan yang cukup banyak.Kelebihan Font Awesome
- Gratis, Font Awesome boleh digunakan siapapun.
- Dokumentasi lengkap.
- Memiliki koleksi ikon yang lengkap.
- Compatible diberbagai browser.
- Mudah digunakan.
- Ringan.
Cara Install Font Awesome
Dalam memasang atau install Font Awesome juga cukup mudah. Ikuti langkah-langkah berikut.1. Kunjungi alamat web resmi Font Awesome.
https://fontawesome.com2. Plih Tombol Start Using Free.
Jika belum memiliki akun ikuti panduan mendaftarnya nanti akan mendapat kode kit kamu.
3. Copy Kode Kit yang kamu dapatkan.
4. Nah selanjutnya kamu buka akun blogger pergi ke pengaturan tema HTML.
Cari kode </head> dan pastekan kode kit tadi tepat DI ATAS </head>.
5. Klik SIMPAN. Dari sini kita sudah berhasil meng-install Font Awesome di Blog.
Cara Pakai Font Awesome
1. Buka Web Font Awesome.
2. Klik menu Icons. Untuk melihat daftar koleksi ikon.
3. Lalu sebagai contoh ketikkan kata "Laptop". Lalu Klik ikon Laptopnya.
4. Selanjutnya akan muncul kode unicode dan kode HTML untuk penggunaan icon.
Lalu bagaimana cara menambahkannya dalam penulisan html di Blog.
Ada banyak cara, misal cara dibawah ini.
Cara Memasang ikon Font Awesome melalui HTML
Cara untuk memasang ikon Font Awesome melalui HTML adalah dengan menuliskannya ke dalam tag berjenis inline seperti i dan span. Hampir sebagian besar lebih memilih menggunakan i, di websitenya pun dicontohkan menggunakan i, jadi kita pun akan memakai tag tersebut (berhubung penulisannya lebih pendek juga sih).Berdasarkan penjelasan di atas, maka yang harus kamu lakukan adalah menuliskan tag HTML i dan menambahkan nama class dari ikon ke dalamnya. Dimana nama class ini berawalan fas (dulu menggunakan fa namun dimatikan dalam Font Awesome versi 5).
Contohnya seperti ini:
<i class="fas fa-laptop"></i>Mengubah Ukuran
Untuk mengubah ukuran tinggal menambahkan class lain yaitu
"fa-xs", "fa-sm", "fa-2x", "fa-3x", "fa-4x", "fa-5x", "fa-6x", "fa-7x", "fa-8x", "fa-9x", "fa-10x".
Contohnya
<i class="fas fa-laptop fa-2x"></i>
<i class="fas fa-laptop fa-3x"></i>
<i class="fas fa-laptop fa-5x"></i>
<i class="fas fa-laptop fa-7x"></i>Mudahkan Cara Memasang Font Awesome Untuk Penggunaan Ikon di Blog ini. Kamu bisa mengkreasikan semua yang ada dengan Font Awesome.
