“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..

Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1]

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..

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..

FAIP

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..

  1. Laptop atau benda sejenisnya..
  2. Text editor
  3. Browser
  4. 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..

coba

 

 

Langkah 3

Extrak Font Awesome yang sudah di download dalam folder icon..

Seperti ini..

Extrak Font Awesome

 

 

Langkah 4

Pastekan Code berikut pada text editor anda, Fungsi dari barisan code sudah ada di dalamnya.

<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..

<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..

 Font Awesome Android

Selesai..

 

Untuk anda pengguna bootstrap selahkan click untuk melajutkan tutorial [Perkenalan Font Awesome dan Cara Mudah Menggunakan untuk Pure CSS dan Bootstap [Part 2] .]

 

Original Posted By Arinadi Nur Rohmad


About Author

Arinadi Nur Rohmad

Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..


Comment & Discussions

  • Bagus, lanjutkan terus nulis

  • Abdul Aziz (Guest)
    dikira tutorial yang bagaimana, ternyata cuma cara pakai fontawesome doang toh.
    font bootstrap 3 beda sama font fontawesome, bootstrap 3 itu pake font http://glyphicons.com/

  • Arinadi Nur Rohmad
    to Choirul Anam : Terimakasih Pak.
    to Abdul Aziz : Seperti yang saya tulis diatas, ini framework tambahan yang biasa dipakai oleh webdesigner karena lebih lengkap daripada glyphicons..

  • (Guest)
    Lanjutannya mana gan?

    http://www.bloggershare.com

  • (Guest)
    Nice Info ... Where is part 2?

    http://www.bloggershare.net/

  • Please LOGIN before if you want to give the comment.