Header Ads

Cara Menggunakan Font Awesome Icons

Font Awesome Icons adalah merupakan sebuah perpustakaan icon font yang keren-keren. Dan saat ini sudah banyak digunakan pada kebanyakan situs-situs terkhusus pada tema atau template premium. Dengan menggunakan font awesome icons ini akan lebih memudahkan kita dalam hal terlalu banyaknya penggunaan kode-kode HTML "style markup".

Kita sepakat, bahwa tanpa icon-icon rasanya keindahan sebuah website belumlah lengkap. Selain itu tanpa icon, kita juga akan dipaksa untuk hanya menggunakan teks untuk menggambarkan secara antarmuka "interface". Nah, jika tahun-tahun 2000-an penggunaan icon pada sebuah website didominasi atau diwakilkan dengan gambar berformat .png atau juga .jpg dll tapi dengan menggunakan "font awesome icons" maka gambar-gambar .png tadi tak lagi kita perlukan. Eet bukan berarti semuanya ini hanya opsi yang mungkinlayak anda gunakan.

Cara menggunakan Font Awesome icons

Baca Juga : Cara Menggunakan Google Font

Anda pasti telah mengenal dengan "icon emotions" yang kalau kita tampilkan dengan menggunakan kode-kode tertentu, ya.. seperti itu sama tapi tak serupa.

Dibawah ini contoh hasil tampilan penggunaan font awesome icons :

gunakan Font Awesome Icons

Catatan!
Sebagai penegasan saja, bahwa icon-icon diatas bukan icon yang dihasilkan dari gambar berformat .png tapi adalah dari font awesome icon.

Mungkin kita asumsikan saja, bahwa nama "FontAwesome icons" itu adalah font, sehingga Anda dapat dengan mudah mengubah warna, ukuran dengan sedikit bantuan dari kode CSS. Sehingga vektor ikon yang terwakilkan dari font, akan terlihat baik dan sempurna pada setiap perangkat (bahkan pada layar retina sekalipun).

Bagaimana saya mendapatkan Font Awesome icons?
Untuk menggunakannya, anda tidak mutlak harus memiliki file paketannya, tapi hanya dengan menggunakan kode-kode HTML dan CSS, tetapi jika anda ingin mendapatkannya anda bisa mengunduhnya secara gratis. ( link unduh pada akhir artikel ini)

Bagaimana mengetahui webiste atau blog telah menggunakan font awesome fonts ini ?
Jika anda ingin mengetahui apakah blog anda sudah teraplikasi dengan penggunaan ini, anda bisa mencarinya dengan keyword pada template blog anda :

fa
fa fa-

Jika anda menemukannya, selamat blog anda sudah mendukung font awesome icons. Tinggal anda memaksimalkan penggunaannya saja. Namun, jika anda tidak menemukannya berarti blog anda memang belum menggunakannya.

Lalu Bagaimana cara menambahkan dan menggunakan Font Awesome icons ?
Baiklah, bagi anda yang ingin mengetahui lebih lanjut tentang penggunaannya, yang perlu anda perhatikan adalah harap backup dulu template blog anda. Karena walaupun sebagian orang mengatakan bahwa penggunaannya sangat mudah namun tidak sedikit pula yang mengalami kesulitan bahkan mengakibatkan hancurnya settingan template blog.

Ok, sebenarnya ada banyak cara untuk menambahkan FontAwesome kedalam tema atau template blog. Tapi disini saya akan fokus pada yang paling mudah, disini saya akan menggunakan dari Bootstrap CDN.

Pertama, Anda harus memasang link kode sumber eksternal pada bagian head website Anda, Taruh kode diantara <head> dan </head> contoh terlihat dibawah ini :

<head> 
.................
.................
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
.................
.................
</head>

Secara default untuk menggunakannya atau untuk menyertakan sebuah fonts icon ke situs web Anda adalah dengan menambahkan tag <i> ke dalam kode HTML Anda, seperti ini:

<i class="fa fa-kode-icon"></i>

Aplikasinya seperti dibawah ini, jika kode :

<i class="fa fa-car"></i>

Maka ikon fa-car akan menghasilkan "rendered" menjadi:


Atau, jika ingin menambahkan ukuran icon :

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

Aplikasi kodenya seperti dibawah ini :

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

Maka ikon fa-car fa- akan menghasilkan "rendered" menjadi:
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Jika anda ingin memberikan link terhadap ikon yang anda pasang, bisa menggunakan kode dibawah ini :

<a class="fa fa-car" href="#"> ini memiliki link </a>

Hasilnya :
ini memiliki link

Link teks "ini memiliki link" diatas akan memberikan hasil yang tidak sama dengan jenis font yang ada pada template. Karena struktur pengkodeannya diluar/tidak ada di CSS di template anda.

Agar hasil yang lebih maksimal, maka rubah menjadi:

<a><i class="fa fa-car" href="#"></i> ini memiliki link </a>

Hasilnya seperti ini, akan lebih sesuai:
ini memiliki link

Ingat!
Silahkan ubah (modifikasi) penggunan kode diatas, tapi penggunaan kode class=fa fa-... harus (wajib) ada dalam satu struktur kode yang dimaksud.
Contoh Kesalahan pengkodean :

<a><i class="fa-car" href="#"></i> ini memiliki link </a>

Hasilnya seperti ini, hanya muncul ikon kotak yang menandakan kesalahan pengkodean :
ini memiliki link

Selain itu juga anda bisa menggunakan Icon Animasi dengan menambahkan kode fa-spin :

<i class="fa fa-spinner fa-spin"></i> 
<i class="fa fa-car fa-spin"></i> 
<i class="fa fa-cog fa-spin"></i> 
<i class="fa fa-refresh fa-spin"></i>

Hasilnya


Catatan!
  1. Pada beberapa browser di beberapa platform memiliki masalah dengan ikon animasi yang menghasilkan efek bergoyang-goyang "jittery".
  2. Untuk CSS3, animasi belum mensupported pada IE8 - IE9.
  3. Contoh-contoh lebih lanjut bisa merujuk ke halaman ini dan koleksi ikon di halaman ini.
KESIMPULAN :
Pada saat ini saya belum menemukan kelemahan dengan menggunakan metoda atau cara ini, tapi mungkin ada sesuatu yang masih belum saya ketahui. Jika Anda mengetahui setiap masalah atau jika Anda tahu cara yang lebih baik, maka silahkan beritahu saya melalui kotak komentar!

Unduh : Font Awesome Icons disini
Bagaimana cara menggunakannya? Baca: Cara Menggunakan Font Awesome di Adobe Photoshop

Demikian sekilar artikel cara menggunakan Font Awesome Icons terbaru 2016, semoga bermanfaat.


No comments

Powered by Blogger.