Cara Membuat Icon Bootstrap Part 2
Hallo selamat datang kembali di dunia programmer dan IPTEK ☺ .
Kali ini saya akan membahas seputar Framework Bootstrap,
yaitu bagaimana cara kita membuat icon kren menggunakan bootstrap ,
langsung lihat dibawah ini .
 |
| Cara Membuat Icon Bootstrap Part 2 |
Bootstrap ini menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah dan simple, fasilitas ini di sebut dengan "Glyphicon".ada sangat banyak icon yang di sediakan oleh bootstrap. dan masing-masing sudah di beri nama dan kita hanya perlu memanggil nama class nya masing-masing untuk menampilkan icon bootstrap yang di inginkan.
Untuk menampilkan icon bootstrap yang pertama kali harus di lakukan adalah menambahkan class "glyphicond" di dalam tag <span> pembuka. setelah menambahkan class glyphicon kemudian tambahkan nama class icon masing-masing sesuai dengan icon yang ingin kita inginkan. untuk melihat icon-icon yang sudah di sediakan oleh bootstrap anda bisa melihatnya langsung pada situs resmi bootsrap.
http://getbootstrap.com/components/#glyphicons Disini
Seperti pada gambar dibawah ini
 |
| Cara membuat Icon Bootstrap |
Langsung saja kita buka text editor nya dan mulai membuat icon bootstrap nya .
salin/tulis script di bawah ini
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bootstrap Part 2 || Cara Membuat Icon Dengan Bootstrap</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>Cara Membuat Icon Dengan Bootstrap | www.duniacodeiptek.blogspot.com</h1>
<p>Icon Home: <span class="glyphicon glyphicon-home"></span></p>
<p>Icon Home sebagai link:
<a href="#"><span class="glyphicon glyphicon-home"></span></a>
</p>
<p>Icon User: <span class="glyphicon glyphicon-user"></span></p>
<p>Icon Hapus/tempat sampah: <span class="glyphicon glyphicon-trash"></span></p>
<p>Icon Hapus/tempat sampah diatas tombol merah:
<a href="#" class="btn btn-danger btn-lg">
<span class="glyphicon glyphicon-trash"></span>
</a>
</p>
<p>Icon Print : <span class="glyphicon glyphicon-print"></span></p>
<p>Icon Print di atas tombol Hijau:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
<p>Icon Edit/Pencil : <span class="glyphicon glyphicon-pencil"></span></p>
<p>Icon Edit/Pencil diatas tombol biru:
<a href="#" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</p>
</div>
</div>
</body>
</html>
Atau lihat pada gambar dibawawah ini
 |
| Cara Membuat Icon Bootstrap Part 2 |
Dan Kita lihat hasil nya yah :)
perhatikan pada gambar di bawah ini
 |
| Cara Membuat Icon Bootstrap Part 2 |
Bagaimana hasil nya bagus kan ? :)
cukup sampai disini dulu yah cara mebuat icon part 2 nya, semoga bermanfaat bagi yang melihat nya yah , jangan kemana mana selalu tunggu update terbaru dari http://duniacodeiptek.blogspot.com/ yah . dan jangan lupa juga untuk
Share nya Yah :) -->>
Belum ada Komentar untuk "Cara Membuat Icon Bootstrap Part 2 "
Posting Komentar