Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Nama : Faqum Alf a Dwiyanto NIM : 12141368
Document related concepts
no text concepts found
Transcript
Page 1 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
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.
1. Penjabaran deskripsi framework
2. Cara menggunakan
3. Contoh screenshot hasil dari penggunaan CSS Framework tersebut
Jawab:
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”.
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
Page 2 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
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 -->
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
Page 3 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
<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>
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
Page 4 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
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;
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
Page 5 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
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.
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
Page 6 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
Screenshot Syntak HTML.
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
Page 7 of 8
|| Faqum Alfa Dwiyanto ||
Tutorial Font Awesome
|| 12141368 ||
UTS Stmik El Rahma
||Stmik El Rahma Yogyakarta||
Page 8 of 8
Tutorial Font Awesome
UTS Stmik El Rahma
Screenshot syntak CSS
Screenshot hasil web
|| Faqum Alfa Dwiyanto ||
|| 12141368 ||
||Stmik El Rahma Yogyakarta||
