.

CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT

Dalam artikel ini saya akan mengulas tentang bagaimana caranya memasang icon font awesome di blog yang tentunya dengan cara yang mudah. Tetapi sebelum kita melangkah ke cara pemasangannya, seperti biasa kita harus perkenalan dulu dengan yang namanya si font awesome ini, agar teman-teman blogger juga tahu betapa keren dan awesome nya icon font yang satu ini jika diterapkan di blog.
CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT
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 tombol 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.


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

Pertama, teman-teman harus memasang link kode 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>

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>

Caranya pengaplikasiannya 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>

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


Lihat contoh di bawah ini :
CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT
Contoh menempatkan Icon Font Awesome di tombol Home

Jika ingin merubah warna icon 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 icon 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>


Mungkin cukup sekian ulasan artikel mengenai cara memasang icon 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 www.amaterasublog.com, semoga bermanfaat :-)

38 Responses to "CARA MEMASANG ICON FONT AWESOME DI BLOGSPOT"

  1. Bagus kali gan template nya.mintak link template nya gan untuk download

    ReplyDelete
    Replies
    1. Template yg udh jadi banyak di google gan :v
      Thanks gan sudah berunjung :)

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

    ReplyDelete
  3. Wahh ini nih yang saya cari, makasi tutorialnya gan

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

    ReplyDelete
  5. Membuat nya terlihat lebih menarik, nice lah om :)

    ReplyDelete
  6. Ntap gan, oh ternyata namanya fon awesome, nyoba ah, makasih tutornya, sangat membantu.

    ReplyDelete
  7. Wahh ini nih yg sy cari2, dn pd akhirny ktmu jg;)

    ReplyDelete
  8. Kira kira ngaruh di page load nya gak gan?

    ReplyDelete
  9. Wah mantao,sudah saya terapkan di www.android21.me

    ReplyDelete
  10. Wah ini sih lengkap banget tutorialnya. Makin kece blog ane hehehe. Makasih minn

    ReplyDelete