Asalamualaikum..
Mungkin untuk sebagian orang masih nyaman membuat icon dengan photoshop untuk merubah warna dan sebagainya, dan nantinya pasti akan disave dalam bentuk image yang tuntu sedikit memberatkan website.
Tahukan anda, sekarang sudah ada cara baru untuk memasang icon di website anda tanpa harus memberatkan kinerjanya yaitu dengan sytem “Font Icon”, sebenarnya jika anda menggunkan Framework CSS “Bootstrap 3” anda sudah memiliki system “Font Icon” ini tapi dengan jumlah yang terbatas, hanya kurang dari 200 icon saja..
Tentu saja bagi anda sang Kreator Web Design ikon itu masih kurang bukan? Ya tentu saja ada Framework lain yaitu “Font Awesome”.
Berbeda dengan “Bootstrap” yang mencakup lingkup CSS, “Font Awesome” hanya berfokus pada icon saja tapi itulah kelebihanya..
“Font Awesome” adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system “Font Icon” yang memungkinkan kita untuk merubah warna dan ukuran font dengan menggunakan CSS tanpa takut Icon menjadi Pecah-pecah dan tantunya lebih ringan daripada Image Icon..
Ini sedikit contoh icon dari Font Awesome..
Untuk melihat ratusan bentuk dan code icon lainnya pada Font Awesome dapat anda lihat di (http://fortawesome.github.io/Font-Awesome/icons/ ).
Tapi jika anda bekerja secara Offline, Saya sarankan anda mendownload extensi pada Google Chrome ini..
Anda dapet mendapatkan secara gratis di (https://chrome.google.com/webstore/detail/font-awesome-icon-picker/mcepmpclbgahgbpcgbmnpplcfmlaiopm)
Sekarang kita akan mulai tutorial Menggunakan Font Awesome.
Saatnya kita menyiapan Alat dan bahannya..
- Laptop atau benda sejenisnya..
- Text editor
- Browser
- Font Awesome v.4 (http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip )
Tutorial Pertama
Font Awesome Untuk Pure CSS
Langkah 1
Nyalakan Laptop dan buka Text editor anda..
Langkah 2
Buat folder dengan nama “coba”..
Buat folder “icon” didalam folder “coba”..
Seperti ini..
Langkah 3
Extrak Font Awesome yang sudah di download dalam folder icon..
Seperti ini..
Langkah 4
Pastekan Code berikut pada text editor anda, Fungsi dari barisan code sudah ada di dalamnya.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html><head><title>Ratusan icon Dengan Font Awesome</title><!--Memanggil Font Awesome CSS, menggunakan .min.css karena lebih ringan--><link href="icon/css/font-awesome.min.css" rel="stylesheet"><!--Memanggil CSS milik anda, misal (<link href="style.css" rel="stylesheet">)--><link href="..." rel="stylesheet"></head><body><!--Contect Start--><!--Content End--></body></html> |
Kita akan melakuakan codeing di antara content_start dan content_end..
Langkah 5
Sekarang kita akan menampilkan beberapa icon dengan beberapa bentuk, warna dan ukuran..
Coba Patekan code ini di antara content start dan content and..
1
2
3
4
5
| <i class="fa fa-android"><i> <!--Menampilkan icon--><i class="fa fa-android fa-3x"><i> <!--Menampilkan icon dengan perbesaran 3x--><i class="fa fa-android" style="font-size: 70px"><i> <!--Menampilkan icon dengan ukuran 70px--><i class="fa fa-android fa-5x" style="color: green"><i> <!--Menampilkan icon dengan perbesaran 5x dan berwarna hijau--><i class="fa fa-android fa-spin" style="color: green"><i> <!--Menampilkan icon berwarna hijau, dan berputar--> |
Syntax dasar pada Font Awesome adalah <i class=”fa fa-code”></i>.
Langkah 6
Save script tadi dengan nama index.html di folder coba..
Buka file index.html tadi dengan browser anda..
Hasilnya seperti ini..
Selesai..
Tidak ada komentar:
Posting Komentar