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

FontAwesome

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 :

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 :

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

Lihat contoh gambar di bawah ini :

Contoh menempatkan Icon Font Awesome di tombol Home

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

Contoh :

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

Contoh :

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!

Cara Memasang Icon Font Awesome di Blogspot

Apa Itu Font Awesome?

Cara Memasang Icon Font Awesome di Blogspot

Penutup ...

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

Label