Cara Menggunakan dan Memasang Font Awesome di Blog

Cara Menggunakan dan Memasang Font Awesome di Blog - Font Awesome merupakan font yang berisi sekumpulan icon-icon yang telah dimuat menjadi framework css yang bisa digunakan untuk mempermudah menampilkan icon-icon standar di blog dan icon ini dapat di edit mulai dari ukuran, warna, drop shadow dan lainnya menggunakan css. Font awesome diciptakan oleh Dave Gandy, dan saat ini (november 2017) font ini sudah dalam versi 4.7.0 dengan total sekitar 605 icon. Anda bisa mendownloadnya disitus https://fontawesome.io/. Apa saja keuntungan dan bagaimana cara menggunakannya?

Keuntungan Menggunakan Font Awesome

Menggunakan font awesome, anda bisa membuat sebuah icon yang menarik dengan hanya menggunakan teks berbentuk gambar (tanpa gambar) sehingga tidak memberatkan loading blog ketika diakses oleh pengunjung. Bisa dilihat dari namanya font awesome menunjukkan itu adalah font yang dalam bahasa indonesia artinya huruf. Didalamnya terdapat 605 icon yang siap anda gunakan dengan gratis dan untuk mengimplementasikannya sangat mudah baik itu dari segi ukuran atau warna, sudah support retina display, mudah mengintegrasikannya dengan framework html lainnya. Untuk menggunakan Font Awesome ini pada sebuah website atau blog, yang perlu anda lakukan adalah me-load file font-awesome.css pada tag HEAD file html atau kode template anda, untuk lebih jelasnya silahkan simak langkah-langkahnya.

Cara Menggunakan dan Memasang Font Awesome di Blog

1. Pertama silahkan login ke akun blogger anda.
2. Pada menu blogger atau dashboard silahkan pilih menu Template atau Tema, lalu klik Edit HTML.
3. Cari kode </head> gunakan Ctrl+F untuk mempermudah pencarian.
4. Setelah ketemu, letakkan kode dibawah ini diatas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>

5. Klik Simpan Template.

Kode yang anda letakkan tadi diatas halaman atau kepala website atau blog akan me-load font-awesome.min.css yang ada di BootstrapCDN, dengan begitu anda akan selalu menggunakan latest dan versi yang stabil dari Font Awesome ini. Setelah itu anda tinggal mengimplementasikan Font Awesome ini pada website atau blog anda, caranya sangatlah sederhana yakni dengan menuliskan code seperti dibawah ini.

<i class="fa fa-home"></i>
<i class="fa fa-home fa-lg"></i> fa-lg
<i class="fa fa-home fa-2x"></i> fa-2x
<i class="fa fa-home fa-3x"></i> fa-3x
<i class="fa fa-home fa-4x"></i> fa-4x
<i class="fa fa-home fa-5x"></i> fa-5x

hasilnya akan seperti ini :

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Apabila anda ingin memberikan tulisan dan link pada icon tersebut, anda bisa menggunakan kode berikut.

<a class="fa fa-home" href="#">home</a><br />

Maka hasilnya akan seperti ini :

home

Catatan :
- Ganti fa-home dengan kode font awesome yang anda inginkan.
- Ganti tanda pagar # dengan link yang anda inginkan.
- Ganti tulisan home dengan kata-kata yang anda inginkan.

Apabila anda ingin menambahkan efek putar (Spin), anda bisa menggunakan kode berikut.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>

Maka hasilnya akan seperti berikut :





Untuk ingin tahu lebih detail cara penggunaanya kamu bisa mengunjungi link https://fortawesome.github.io/Font-Awesome/get-started dan untuk melihat berbagai contoh penggunaannya di https://fortawesome.github.io/Font-Awesome/examples. Berikut contoh gambar penggunaan font awesome pada menu navigasi blog saya.

Dengan menggunakan font awesome di blog, maka akan membuat blog menjadi lebih terlihat keren dan profesional di mata para pengunjung atau pembaca.
Demikian tutorial sederhana mengenai bagaimana cara menggunakan dan memasang font awesome di blog, semoga bermanfaat. " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG