Cara Pasang Font Awesome di Blogger Dan Website


Ngulik Kode - Font Awesome adalah salah satu framework yang digunakan untuk mempercantik tampilan dan desain yang dibutuhkan pada website atau blog. Font awesome ini memberikan kemudahan dalam menggunakan icon website atau blog kepada setiap penggunannya. Seperti font pada umumnya font awesome ini sangat mudah untuk di customize dengan berbagai style css seperti size, color, drop shadow dan lain sebagainya.

Pada penulisan artikel ini versi dari Font Awesome ini adalah 4.6.3 dan mungkin kedepannya versi akan terus di update dan jumlah font akan dikembangkan lagi, pada saat ini jumlah icon yang tersedia adalah dengan jumlah 634 icon. Berikut adalah contoh icon-icon terbaru dari font awesome.

Ngulik Kode - Icon Font Awesome

Apa Saja Kelebihan Dari Penggunaan Font Awesome Ini ?

› Dalam penggunaanya gratis untuk keperluan comersial.
› Tersedia 634 icon dalam satu paket.
› Pemasangan sangat mudah.
› Tidak mejadikan loading lemot pada website atau blog
› Tidak perlu menggunakan javascript
› Sangat mudah diberikan style CSS.
› Selalu akan terlihat sempurna dalam berbagai ukuran font.

Bagaimana Cara Pemasangannya ?

Pemasangan Font Awesome Secara Online
Untuk pemasangan yang mudah, tanpa perlu mendownload file pendukung dari font awesome ini anda tinggal meletakan code seperti dibawah ini tepat pada bagian <head> atau tepat diatas </head>

Perlu anda ingat kalau anda menggunakan degan metode ini, anda harus tersambung ke internet agar icon dapat muncul.
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
Selanjutnya anda pasangkan icon-icon yang ingin anda pasangkan dengan menggunakan code seperti contoh dibawah ini pada bagian tepat didalam code <body> </body>
<i class="fa fa-camera-retro"></i>
Jika sudah selesai silahkan lihat hasilnya.

Pemasangan Font Awesome Secara Offline
Sekarang pemasangan dengan cara mendownload file pendukung dari font awesome caranya hampir sama dengan cara di atas tetapi pada cara ini anda harus mendownload terlebih dahulu file font awesome. disini

Jika sudah didownload kemudian anda extrak kemudian simpan didalam folder bersamaan dengan file-file website anda lihat seperti contoh dibawah.


Jika sudah anda bisa tuliskan di dalam file website anda dengan menggunakan code seperti contoh dibawah ini. Letakan kode dibawah ini tetap dibawah code <head> atau tepat diatas </head>
<link href='assets/css/font-awesome.min.css' rel='stylesheet'/>
Perhatikan pada kode diatas 'assets/css/font-awesome.min.css' itu adalah tempat peletakan file font-awesome.min.css didalam folder assets kemudian css. Setelah peletakan kode diatas sudah dilakukan kemudian anda bisa memasukan kode dibawah ini didalam kode <body> </body>
<i class="fa fa-camera-retro"></i>
Jika sudah silahkan lihat hasilnya. dan dibawah ini adalah contoh beberapa icon yang bisa kalian coba.

fa fa-camera-retro
fa fa-area-chart
fa fa-film
fa fa-cogs
fa fa-recycle

Berikut adalah cara pemasangan icon font awesome lebih lengkapnya anda bisa kunjungi ke situs aslinya berikut http://fontawesome.io/

Sekian tutorial yang bisa saya berikan jika ada pertanyaan silahkan komentar dibawah ini, dan jangan lupa like, share ke teman-teman anda jika artikel ini bermanfaat, terimakasih.

3 komentar

  1. biar jadi animasi kayak agan gimna roda muter"

    BalasHapus
    Balasan
    1. Dengan menambahkan code fa-spin di dalam class..

      contoh : <i class="fa fa-cog fa-spin"></i>

      agan perhatikan code di atas dan silahkan coba dan lihat hasilnya.

      Hapus
  2. kalau buat yang kayak instagram itu gimana ????

    BalasHapus


EmoticonEmoticon