Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah dengan gaya bahasa Anda. Jawab: 1. Penjabaran deskripsi framework 2. Cara menggunakan 3. Contoh screenshot hasil dari penggunaan CSS Framework tersebut 1). Pengertian Framwork. Framwork css adalah suatu konsep yang sudah dirancang serta terorganisasi dalam satu paket, yang digunakan untuk membantu mempermudah para desainer / web developer dalam merancang atau membangun sebuah layout web yang baik dan tertata rapi. Font Awesome adalah kumpulan vektor 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. 2). Cara menggunakan Font Awesome Berikut adalah langkah langkah untuk mencoba mengimplementasikan Font Awesome Pertama buka Text editor anda. Untuk memudah kan kita dalam mencari folder maka letakan css, scrip HTML dan Font awesome dalam satu folder. Buat folder dengan nama coba. Buat folder icon didalam folder coba.
Page 2 of 8 Tutorial Font Awesome Seperti ini. Extrak Font Awesome yang sudah di download dalam folder icon. Seperti dibawah ini. Tulis Code atau scrip HTML seperti berikut pada text editor anda, Fungsi dari barisan code sudah ada di dalamnya. <html> <head> <title>tutorial Font Awesome</title> <!--Memanggil Font Awesome CSS, menggunakan.min.css -->
Page 3 of 8 Tutorial Font Awesome <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> <nav> <!--nav Start--> <!--nav End--> </body> </html> Kita akan melakuakan codeing di antara nav_start dan nav_end. Sekarang kita akan menampilkan beberapa icon dengan beberapa bentuk, warna dan ukuran.. Coba tuliskan code ini di antara content start dan content end. <!---Nav Srat from here---> <nav> <ul id="menu"> <li><a href="#"><span class="fa fa-home"></span></a></li> <li><a href="#"><span class="fa fa-envelope"></span></a></li> <li><a href="#"><span class="fa fa-github"></span></a></li> <li><a href="#"><span class="fa fa-facebook"></span></a></li> <li><a href="#"><span class="fa fa-twitter"></span></a></li> <li><a href="#"><span class="fa fa-google-plus"></span></a></li> </ul> </div> </nav>
Page 4 of 8 Tutorial Font Awesome Syntax dasar pada Font Awesome adalah <i class= fa fa-code ></i> atau <span class= fa fa-code >. Seperti contoh diatas misal kita mau menampilkan icon facebook maka kita ketikan <span class = fa fa-facebook > atau <i class= fa fa-facebook > Save script tadi dengan nama index.html di folder coba. Sedangkan untuk menubah warna, ukuran font dan backgroun fari layout web, kita bisa merancangnya dengan css seperti dibawah. @charset "utf-8"; /* CSS Document */ body{ background:#09f; padding:25px; header { background:#006; border:#000; padding:10px; margin:5px; border-radius:5px; color:#fff; h2{ background:#000; border:dashed #006 10px; margin:10px; padding:inherit; color:#09f; border-radius:5px; nav ul#menu li {float:left; padding: 10px; border-radius : 8px 8px 8px 8px;
Page 5 of 8 Tutorial Font Awesome margin : 10px; #clear {clear: both; nav ul#menu li { list-style : none; padding: 10px; border-radius : 8px 8px 8px 8px; margin : 10px; border: 1px solid #FFF; font-weight:bold; background:#000; font-size:24px; nav ul#menu li a{ text-decoration : none; padding: 10px; border-radius : 8px 8px 8px 8px; margin : 10px; color:#0ff; nav ul#menu li a:hover{ color:#00f; Syntak CSS dalam membuat navigator web. 3). Contoh Screenshot dari hasil CSS Freamwork Font Awesome.
Page 6 of 8 Tutorial Font Awesome Screenshot Syntak HTML.
Page 7 of 8 Tutorial Font Awesome
Page 8 of 8 Tutorial Font Awesome Screenshot syntak CSS Screenshot hasil web