Menampilkan Icon dengan Font Awesome

Menampilkan Icon dengan Font Awesome

Font Awesome

Untuk seseorang Front-End Web Developer terkadang untuk membuat tampilan agar terlihat cantik dalam sebuah tampilan web memerlukan pemanis berupa icon. Dengan adanya icon-icon akan dapat membuat visualisasi lebih menarik dari sebuah web menjadi tampak lebih segar dan tentunya lebih indah. Namun masalahnya adalah, membuat icon itu bukan sebuah hal yang gampang. Diperlukan skill khusus untuk mendesign icon.

Baca Juga :

Cara Mendesain Website Sederhana Tapi Elegan

Membuat Desain Website Lebih Responsive

Untuk icon khusus yang merupakan ciri khas dari sebuah produk atau brand, tentu kita harus mendesainnya sendiri. Namun bagaimana dengan icon-icon standar yang memang selalu digunakan? Haruskah kita membuatnya juga satu persatu? Jawabannya tentu saja tidak, kita bisa menggunakan tools yang satu ini untuk mempermudah kerja kita, Font Awesome.

Data Sheet Font Awesome

Ada beberapa keuntungan yang bisa kita dapatkan jika kita menggunakan Font Awesome ini, yaitu melalui Font Awesome ini kita bisa mendapatkan 519 icon didalamnya, tidak memerlukan java script untuk menggunakannya, fleksibilitas ukuran dari ukuran kecil sampai ukuran yang sangat besar, gratis, mudah mengimplementasikan edit ukuran, warna menggunakan css control, sudah support retina display, mudah mengintegrasikan dengan framework html lainnya. Font Awesome adalah icon yang berupa font jadi sangat fleksibel untuk merubah ukuran, warna dan efek css lainnya, keuntungan lainnya adalah karena berupa font otomatis Font Awesome akan lebih cepat diload daripada me-load icon yang berupa image.

Baca Juga :

Kesalahan Membuat Desain Web

Tips Membuat Desain Blog Lebih Menarik

Font Awesome merupakan font yang berisi icon-icon yang telah dimuat menjadi framework css yang bisa digunakan untuk mempermudah menampilkan icon-icon standar dalam front-end development. Font Awesome dibuat oleh Dave Gandy, dan bisa didownload disini. Dan jika kamu mau berkontribusi dan ingin melihat projectnya bisa ke Githubnya disini.

Ada 439 jenis icon yang ada di Font Awesome yang siap untuk digunakan. Untuk melihat icon apa saja yang bisa kita gunakan bisa Kamu lihat disini. Sebenarnya Font Awesome didisain untuk Bootstrap, namun masih oke digunakan untuk framework yang lainnya. Karena Font Awesome merupakan vektor, jadi Kamu nggak perlu takut menggunakan size besar dan
khawatir tampilannya akan rusak jika digunakan pada size yang besar.

Penggunaannya sangat mudah sekali, kita hanya perlu menyimpan kode berikut pada header kita:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Kemudian memanggil icon yang ingin kita gunakan dengan cara seperti berikut:

<i class="fa fa-heart"></i>
<i class="fa fa-home"></i>
<i class="fa fa-flag"></i>

Kamu juga bisa memperlakukannya seperti font pada umumnya dengan memberi warna pada iconnya atau pada backgroundnya. Ingin tahu lebih detail cara penggunaanya kamu bisa mengunjungi link http://fortawesome.github.io/Font-Awesome/get-started dan untuk melihat berbagai contoh penggunaannya di http://fortawesome.github.io/Font-Awesome/examples

Selamat bersenang-senang.. 😀

Baca Juga :

Kenali Mudahnya Bisnis Lewat Website

Cara Cek Kondisi Website Down

JOGJA ONE SOLUTION – KURSUS BISNIS ONLINE JOGJA | JASA PROMOSI JOGJA | JASA PEMBUATAN WEBSITE JOGJA | INTERNET MARKETING JOGJA | JASA SEO JOGJA | AHLI WEBSITE | PELATIHAN INTERNET MARKETING | SOFTWARE APLIKASI JOGJA | JASA SOFTWARE JOGJA Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802

JOGJA ONE SOLUTION – Kami hadir memberi solusi untuk kebutuhan media promosi bisnis atau usaha Anda. Grafik order dan omzet meningkat. Dapatkan website murah, desain menarik, kompleks, dan full maintenance dengan harga yang terjangkau KLIK DISINI. Atau hubungi kami di Telp (0274) 5017127 | WA : 0888 0289 8802


Digital Content Writer, Special Content Creator, Technical Content Writer dan Suka berbagi hal baru yang bermanfaat bagi orang lain.

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat