Beranda - Tentang - Daftar Isi - Kontak - Link - Privacy -

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 icon font awesome di blogspot yang tentunya dengan cara yang paling mudah.
Cara Memasang 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 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>

Penutup

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

Related Posts

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

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

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

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

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

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

    ReplyDelete

Artikel Terpopuler :