Introduction and How to Use Font Awesome
Nurroin's Blog - Hai kawan kali ini saya akan mensyringkan atau juga membagi tutirial mengenal dan menggunakan font awesome.
PENGERTIAN
Font Awesome adalah huruf dan/atau angka yang membentuk gambar dalam desain blogger atau website. Itu pengertian font awesome secara praktis. Secara harfiyah, font awesome artinya 'huruf yang mengagumkan'. Jarene Wiki :v Walupun sudah banyak blog yang membahas tapi apa salahnya memposing dan untuk genap - genap aja :v
Apasih Font Awesome itu ? menurut saya Font awesome adalah sebuah framework css yang memberikan fitur untuk membuat sebuah icon dengan mudah, jadi intinya kita dapat dimudahkan ketika ingin membuat icon pada website / blog kita, kita hanya tinggal memanggil class css dari font awesome tersebut maka munculah sebuah icon tanpa kita buat terlebih dahulu icon - icon tersebut. Icon sangat berpengaruh penting dalam sebuah website. Website bisa dikatakan SEO apabila terdapat icon - icon flat didalamnya dan website tersebut kelihatan lebih hidup
Font Awesome memberikan anda kemudahan dalam menggunakan icon website dalam bentuk vector. Font Awesome selayaknya penggunaan font face pada umumnya yang dapat dengan mudah di customized dengan berbagai style css seperti size, color, drop shadow dan lain-lain.
Apa saja sih kelebihan dalam menggunakan font awesome ini?
- Dalam satu file font terdiri 369 icon.
- Gratis digunakan untuk keperluan komersial.
- Compatible dengan Bootstrap 3.0.0.
- Tidak perlu menggunakan javascript.
- Sangat mudah diberikan style CSS.
- Selalu akan terlihat baik dalam berbagai ukuran font.
Sebelum menggunakan font awesome sobat harus menginstall font awesome tersebut, ada 2 yaitu via offline dan online, keuntungan offline adalah class tersebut bekerja walaupun sobat tidak terhubung dengan internet, tetapi sobat harus download terlebih dahulu filenya, beda dengan via online, sobat tinggal menempelkan link cdn dari font awesome tersebut, tetapi class font awesome tidak berfungsi ketika sobat tidak terhubung dengan internet dengan kata lain sobat harus online terlebih dahulu baru class tersebut bisa berfungsi
INSTALASI VIA OFFLINE
1. Download Font Awesome Disini : http://fontawesome.io/
2. Extract file yang sudah download tadi , lalu buka text editor sobat , sobat harus memasang link kode internal menggunakan tag <link> yang ditaruh diantara <head> dan </head> berikut contohnya
<head>
<!-- Taruh Diantara <head> -->
<link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.css">
</head>
INSTALASI VIA ONLINE
Pertama, Anda harus memasang link kode sumber eksternal pada bagian head website Anda, Taruh kode diantara <head> dan </head> contoh terlihat dibawah ini :
<head>
<!-- TARUH DIANTARA HEAD -->
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
CARA MENGGUNAKAN FONT AWESOME
1. 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-code icon</i>Maka Pengaplikasianya seperti ini
<i class="fa fa-calendar</i>Maka icon fa-car menghasilkan " rendered " dan muncul seperti ini
Lebih jelasnya perhatikan gambar berikut
2. List dari icon bisa sobat lihat disini : http://fontawesome.io/icons/
3. Sobat juga bisa mengatur ukuran dari icon tersebut , berikut caranya :
<i class="fa fa-kode-icon fa-lg"></i>Pengaplikasianya seperti berikut
<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>
<i class="fa fa-car fa-lg"></i>Maka icon fa-car akan "rendered" menjadi seperti ini :
<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>
> fa-lg
> fa-2x
> fa-3x
> fa-4x
> fa-5x
4. Jika sobat ingin memberikan link pada icon tersebut beginilah contohnya :
<a class="fa fa-firefox href="#isiLink"> Contoh Link</a>Hasilnya : Contoh Link
Link teks "Contoh 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 hasilnya lebih maksimal, ubahlah seperti berikut :
<a><i class="fa fa-firefox" href="#isiLink"></i> ini memiliki link </a>Maka hasilnya seperti berikut Contoh Link
KESIMPULAN
Dengan adanya framework css font awesome ini kita dimudahkan dalam membuat icon untuk website kita, seperti yang sudah saya jelaskan diatas untuk font awesome memiliki 2 cara instalasi yaitu via offline dan online, dan cara penggunaanya sudah saya paparkan diatas. Jika sobat masih penasaran dengan font awesome ini silahkan sobat kunjungi website resminya di http://fontawesome.io . Sekian Terima Kasih
Referensi : Dumet School , Hanyalah Berbagi Informasi , Font Awesome Official
No comments :
Post a Comment