Twitter Facebook Delicious Digg Stumbleupon Favorites More

26/01/17

Pengenalan Font Awesome Dan Cara Menggunakannya

Pengenalan Font Awesome


font-awesom


TentangIT.com | Terkadang dalam website kita memerlukan icon-icon sosial media seperti youtube, twitter facebook. dan tidak menutup kemungkinan juga kita memerlukan icon-icon untuk menggambarkan beranda yang biasanya di gambarkan dengan icon rumah atau kontak dengan icon telepon. Atau bahkan untuk mempercantik halaman lain seperti daam halaman teknis di dunia Infomation Technology seperti untuk menggambarkan Server, Database, Wifi hingga alat transportasi.


icon terbaru font awesome


Dimana biasanya kita menggunakan jpeg ataupun gif untuk menggambarkan sebuah halaman ataupun alat, ditambah lagi jika kita membutuhkan beberapa ukuran yang berbeda mulai dari yang terkecil hingga yang terbesar di font awesome ini sudah disediakan dengan berbagai ukuran.


Alasan kenapa harus menggunakan Font Awesome :
1.  1 Font terdiri lebih dari 400 icon.
2.  Tidak memerlukan javascript untuk menggunakan Font Awesome.
3.  Infinite Scalability, yang berarti icon yang ditampilkan akan tetap terjaga kualitas gambarnya meskipun icon di perbesar dalam ukuran berapapun.
4.  Font awesome dapat digunakan secara gratis.
5.  CSS Control, mudah untuk costumize dengan css.
6.  Perfect On Retina Displays, Icon pada font awesome ini adalah vector sehingga akan terlihat sangat baik pada tampilan dengan resolusi tinggi.
7.  Plays Well With Others, Font awesome dapat bekerja sangat baik dengan semua frameworks, karena memang awalnya font awesome dirancang untuk bootstrap.

Cara Menggunakan Font Awesome :

Dan cara penggunaannya pun sangat mudah berikut cara penggunaannya.

1.  Download Font Awesome di Situs Resmi.
2.  Extract Font Awesome


Setelah di extract sntruktur kita panggil css font awesome seperti kita menggunakan file css external yang kita panggil di dalam tag <head> pada html.

Berikut Struktur Font Awesome :

Gambaran struktur font awesome


Kita panggil css font awesome dengan kode berikut :
< link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css" />



Seteleh file css font awesome sudah kita panggil, untuk menampilkan icon font awesome dengan cara seperti berikut :

<i class="fa fa-university fa-1g" aria-hidden="true" > </i>
<i class="fa fa-youtube fa-2x" aria-hidden="true" > </i>
<i class="fa fa-facebook fa-3x" aria-hidden="true" > </i>
<i class="fa fa-twitter fa-4x" aria-hidden="true" > </i>
Untuk kode yang lain silakan untuk lihan di situs resminya :  http://fontawesome.io/icons/


Demikian dapat kami sampaikan, semoga bermanfaat .





font awesome | tentangIt.com
Share:

0 comments:

Posting Komentar

Cari Di Blog Ini

Menerima Jasa

Diberdayakan oleh Blogger.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS

TentangIT

Copyright © Tentang IT | Powered by Blogger
Design by SimpleWpThemes | Blogger Theme by NewBloggerThemes.com & Distributed By Protemplateslab