√ Cara Memasang Icon Font Awesome di Blogspot

Cara Memasang Icon Font Awesome di Blogspot

Amaterasublog - Hallo teman-teman blogger, dalam artikel kali ini saya akan mengulas tentang bagaimana Cara Memasang Font Awesome di Blog yang tentunya dengan cara yang paling mudah.

Cara Memasang Font Awesome di Blogspot

Apa Itu Font Awesome?

Font Awesome adalah kumpulan icon yang telah dibuat sedemikian rupa dengan menggunakan system “Font Icon” yang memungkinkan kita untuk memodifikasi dengan merubah warna dan ukuran font dengan menggunakan CSS tanpa takut Icon menjadi pecah dan tentunya lebih ringan dari pada menggunakan Image Icon.

Bagi teman-teman blogger yang termasuk kategori suka memodifikasi tampilan blog demi mencapai estetika yang diinginkan, saya merekomendasikan untuk menerapkan icon font awesome ini untuk meminimalisir penggunaan image icon agar lebih simpel, menarik dan juga ringan.

Untuk melihat contoh bentuk serta code icon lainnya dari font awesome teman-teman blogger bisa klik tautan link di bawah ini:

CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT
Contoh Icon Font Awesome

Sebenarnya ada banyak cara untuk menambahkan “Icon Font Awesome” kedalam template blog, akan tetapi dalam artikel ini saya akan fokus pada pengaplikasian paling mudah yang mana saya terapkan juga di blog saya ini, yaitu menggunakan icon font awesome dari situs FontAwesome.com.

Cara Memasang Icon Font Awesome di Blog

Baiklah langsung saja berikut adalah langkah-langkah pemasangan icon font awesome di blog:

1. Memasang Kode Link Eksternal

Pertama, teman-teman harus memasang kode link sumber eksternal pada bagian head blog, "PASTE" kode di bawah diantara <head> dan </head>.

<!-- FontAwesome -->
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.4.2/css/all.css' integrity='sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns' rel='stylesheet'/>

Lihat contoh dibawah ini :

CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT
Paste di bawah kode <head>
2. Tentukan/ pilih Icon Font Awesome

Tahap senlanjutnya tinggal menentukan mana yang akan ditambahkan icon font awesome, misalnya di menu navigasi.

Contoh struktur kode "Menu Navigasi" blog kurang lebih seperti di bawah ini:

HTML:
<nav>
    <a href="/home/">Home</a> |
    <a href="/gallery/">Gallery</a> |
    <a href="/contact/">Contact Us</a> |
</nav>

3. Cara Menerapkan Icon Font Awesome

Caranya, silahkan teman-teman kunjungi situs FontAwesome.com terlebuh dahulu lalu, pilih icon mana yang mau diterapkan di menu navigasi tersebut lalu "copy kode html" nya dan "paste" sebelum tulisan yang ingin diberikan icon.

Lihat contoh di bawah ini :

HTML:
<nav>
    <a href="/home/"><i class="fas fa-home"></i>Home</a> |
    <a href="/gallery/"><i class="fas fa-image"></i>Gallery</a> |
    <a href="/contact/"><i class="fas fa-address-book"></i>Contact Us</a> |
</nav>

Contoh :
<i class="fas fa-home"></i>
<i class="fas fa-image"></i>
<i class="fas fa-address-book"></i>

Sebagai contoh saya memasang icon font awesome di menu navigasi tombol HOME di blog ini.

Lihat contoh gambar di bawah ini :

CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT
Contoh menempatkan Icon Font Awesome di tombol Home

Jika ingin merubah warna icon font tambahkan  style="color: warna"  sebelum kode  ></i> 

Contoh :
<i class="fas fa-home" style="color: orange"></i>
<i class="fas fa-image" style="color: orange"></i>
<i class="fas fa-address-book" style="color: orange"></i>

Jika ingin memberikan efek spin pada icon font tambahkan  fa-spin  sebelum kode  ></i> 

Contoh :
<i class="fas fa-home fa-spin"></i>
<i class="fas fa-image fa-spin"></i>
<i class="fas fa-address-book fa-spin"></i>


4. Penutup Icon Font Awesome di Blogspot

Mungkin cukup sekian ulasan artikel mengenai Cara Memasang Font Awesome di Blogspot. Jika di dalam artikel ini ditemukan salah pengertian atau istilah lainnya yang berhubungan dengan ulasan artikel di atas mohon dikrokesi dengan menginggalkan komentar di bawah. Terimakasih sudah berkunjung di amaterasublog dan semoga bermanfaat :-)

Disclaimer : Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini

Berlangganan update artikel terbaru via email:

Tampilkan Komentar
Sembunyikan Komentar

22 Komentar untuk "Cara Memasang Icon Font Awesome di Blogspot"

  1. Wah artikel ini yang saya cari cari, akhirnya ketemu juga... Udah saya follow nih blognya.. Gantian Follow ya gan..

    BalasHapus
  2. Wahh ini nih yang saya cari, makasi tutorialnya gan

    BalasHapus
  3. Oh, gituya cara pasang icon tuh, nice

    BalasHapus
  4. Wew modifikasinya sangat keren ... blog ini bener2 memanjakan mata om ...

    BalasHapus
  5. Ntap gan, oh ternyata namanya fon awesome, nyoba ah, makasih tutornya, sangat membantu.

    BalasHapus
  6. Wahh ini nih yg sy cari2, dn pd akhirny ktmu jg;)

    BalasHapus
  7. Kira kira ngaruh di page load nya gak gan?

    BalasHapus
  8. Wah mantao,sudah saya terapkan di www.android21.me

    BalasHapus
  9. Wah ini sih lengkap banget tutorialnya. Makin kece blog ane hehehe. Makasih minn

    BalasHapus
  10. bagus guys ...tingkatkan lagi yah ..semangat

    BalasHapus

Seputar Blogger & Publisher

Hobi Ikan Hias & Aquascape

Info Anime List & OST Anime

Literatur Sosiologi & Politik

Informasi Menarik Lainnya ...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel