Skip to Content | Skip to Menus | Copyright?

Posted on

Salah satu hal elemen yang cukup menarik dalam sisi desain adalah icon. Ya, icon dapat bercerita lebih banyak dan intuitif dibanding hanya sekedar teks.

Penggunaan icon dalam dunia desain berkembang dari penggunaan sejumlah icon, sprites mode, dan juga iconfont. Mana yang lebih baik diantara ketiga macam diatas, semua kembali pada kebutuhan, dan juga selera developernya. Kali ini saya mengajak anda sobat semua bagaimana menggunakan icon font dengan FontAwesome, kita mulai ya…

Kenapa menggunakan icon font? Apa keuntungan ( dan kerugiannya ? ). Seberapa efektif dan efisien kah dalam aktifitas desain ?

Jawaban dari pertanyaan di atas, sederhana :

  • tidak perlu mahir dalam membuat icon :D
  • hanya dengan satu baris link stylesheet untuk mereferensikan sumber icon font
  • menghemat waktu ( ini yang terpenting ), baik dari sisi development maupun loading time

Kerugian?

Wah, maaf kalau dipikir-pikir kerugiannya ya ada satu http request tambahan, namun akan menjadi tidak berarti bila dibandingkan dengan keuntungan yang diperoleh, selain antisipasi menggunakan CDN untuk meload FontAwesome ( misalnya ), seperti di halaman tutorial ini.

Prosedur penggunaan dan penerapan FontAwesome akan sedikit sulit, tapi banyak mudahnya :D. OK, langsung saja ke tahapan-tahapannya :

tahap 1 : pasang link target ke sumber fontawesome

– seperti halnya meletakkan link referensi css lainnya di tag <head>
contoh :

<link rel="stylesheet" href="template/assets/fontawesome/css/font-awesome.min.css">

( hal ini diasumsikan bahwa pada FontAwesome akan dimuat secara internal dari server – pastikan bahwa anda mendownload paket FontAwesome dan mengekstraknya secara lengkap ke folder namatemplate/assets/ )

mode internal ini misal untuk keperluan development dan dalam local server ( asumsi tidak terhubung ke internet )

atau bilamana dalam tahap production ( live ), akan lebih efisien bila menggunakan sarana free CDN untuk FontAwesome-nya.

contoh :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.4.0/css/font-awesome.min.css">

perhatikan bahwa FontAwesome dimuat dari CDN dan menggunakan versi 4.4.0

tahap 2 : Tentukan elemen yang akan dipasang icont font-nya

kali ini akan menggunakan cara yang paling mudah, yaitu dengan menggunakan model :

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

contoh :

<div class="elementname">Elemen download</div>

yang akan dipasang icon download pada bagian depan.

maka, kita bisa membuatnya menjadi :

<div class="elementname"><i class="fa fa-cloud-download"></i>Elemen download</div>

Bagaimana kita bisa tahu nama-icon yang diperlukan?

Sederhana saja. Anda bisa mendapatinya langsung di situs FontAwesome, di sana langsung bisa diketahui apa nama-icon yang kita perlukan. Atau bisa juga dengan mendownload FontAwesome CheatSheet yang tersebar di internet ( googling lah ).

screenshot FontAwesome homepage

tahap 3 : Modifikasi ukuran, warna icon yang digunakan

Secara default, ukuran icon yang digunakan bisa jadi kurang pas, apalagi warnanya ( warna akan mengikuti bawaan body color dari stylesheet template – mode inherit ). Namun tidak perlu khawatir, karena icon font ini menggunakan CSS kita bisa modifikasi sesuka hati :)

FontAwesome menyediakan sejumlah fitur dimensi secara default untuk mengubah ukuran, yaitu :

.fa-lg {
font-size: 1.33333333em;
line-height: 0.75em;
vertical-align: -15%;
}
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}

Perhatikan bahwa ukuran icon ditentukan dalam satuan em dan bukan pixel (px), hal ini berarti tergantung dari ukuran font yang ditetapkan dalam stylesheet induk ( file CSS utama ).
misal : pada file CSS utama dideklarasikan :

body{
font-size: 15px;
}

Maka font-size: 2em pada file CSS nya fontawesome adalah 2 x 15px = 30px !

Namun bilamana tidak disebutkan dalam file CSS utama untuk ukuran font ( body ), maka browser akan menggunakan nilai default ( umumnya 16px ).

So, bila pada contoh di atas, diinginkan ukuran icon font sebesar 30px, kita cukup memodifikasi menjadi :

<div class="elementname"><i class="fa fa-2x fa-cloud-download"></i>Elemen download</div>

Perhatikan penyusupan eh penyisipan fa-2x !

OK sampai disini untuk ukuran icon font sudah bisa dipahami ya. Jadi, kita lanjut dengan memodifikasi warna icon font yang digunakan.

Untuk mengubah warna sama halnya seperti bermain-main dengan CSS pada elemen lainnya, yaitu menggunakan property color !

Masih menggunakan contoh diatas, kita akan ubah warna icon font menjadi biru laut ( #1E73BE ), maka cukup dengan menambahkan style pada file css :

.elementname i{color: #1E73BE;}

Sampai disini semua terasa mudah kan :D Ya, bermain-main dengan CSS itu sangat menyenangkan, tidak perlu tools macam-macam kita bisa berkreasi sesuka hati. Cukup dengan browser yang dilengkapi dengan fitur Inspect Element semua menjadi mudah.

Sampai ketemu di edisi bermain dan bersenang-senang dengan icon font dan CSS lainnya.

Last Modified on :

CopyRight & Left : ©2007 - now and forever

part of DeVio Multimedia

TOS - Help - Contact - About

Developed with DeVio Playground - Theme Framework