Perkenalan Font Awesome Untuk Pure Css Dan Bootstap. [Part 1]

17 views

Asalamualaikum..

Mungkin untuk sebagian orang masih nyaman menciptakan icon dengan photoshop untuk merubah warna dan sebagainya, dan nantinya niscaya akan disave dalam bentuk image yang tuntu sedikit memberatkan website.

Tahukan anda, kini sudah ada cara gres untuk memasang icon di website anda tanpa harus memberatkan kinerjanya yaitu dengan sytem “Font Icon”, sesungguhnya kalau anda menggunkan Framework CSS “Bootstrap 3” anda sudah mempunyai 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 meliputi lingkup CSS, “Font Awesome” hanya berfokus pada icon saja tapi itulah kelebihanya..

“Font Awesome” ialah kumpulan icon yang telah dibentuk sedemikian rupa, dan memakai system “Font Icon” yang memungkinkan kita untuk merubah warna dan ukuran font dengan memakai CSS tanpa takut Icon menjadi Pecah-pecah dan tantunya lebih ringan daripada Image Icon..

Ini sedikit teladan icon dari Font Awesome..

 

Untuk melihat ratusan bentuk dan code icon lainnya pada Font Awesome sanggup anda lihat di (http://fortawesome.github.io/Font-Awesome/icons/ ).

 

Tapi kalau anda bekerja secara Offline, Saya sarankan anda mendownload extensi pada Google Chrome ini..

Anda dapet mendapat 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..

 

 

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.

<html><head><title>Ratusan icon Dengan Font Awesome</title><!--Memanggil Font Awesome CSS, memakai .min.css alasannya ialah 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 ialah <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 menyerupai ini..

 

Selesai..

 

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

 

Original Posted By Arinadi Nur Rohmad

Author: 
    author
    No related post!