√ Cara Memasang Icon Font Awesome di Blogspot

Cara Memasang Icon Font Awesome di Blogspot

Amaterasublog.com,- 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 Blogspot

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>

Penutup ...

Nah, demikianlah 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 ini. Semoga bermanfaat!

Berlangganan Artikel Gratis :

Tampilkan Komentar
Sembunyikan

( 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. Wew modifikasinya sangat keren ... blog ini bener2 memanjakan mata om ...

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

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

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

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

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

    BalasHapus