วิธีใช้ Icons by Glyphicons ใน Bootstrap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

M008
PHP Hero Member
PHP Hero Member
Posts: 109
Joined: 03/05/2013 10:44 am

วิธีใช้ Icons by Glyphicons ใน Bootstrap

Post by M008 » 31/05/2013 6:33 pm

Icons by Glyphicons คือ ส่วนที่เป็น icons ใน Bootstrap ซึ่งมีให้เลือกใช้งานมากมาย เพื่อให้ปุ่มในหน้าเว็บ หรือ บาร์ต่างๆ มีความน่าสนใจมากยิ่งขึ้น
ตัวอย่างการเรียกใช้ icons
1. ปุ่มบน toobar
1.jpg
1.jpg (5.9 KiB) Viewed 3696 times

Code: Select all

<div class="btn-toolbar">
  <div class="btn-group">
    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
2.บนปุ่ม dropdown
2.jpg
2.jpg (6.32 KiB) Viewed 3696 times

Code: Select all

<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
3.icons จะปรับขนาดตามขนาดของปุ่ม
3.jpg
3.jpg (7.85 KiB) Viewed 3696 times

Code: Select all

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
4.Navigation
4.jpg
4.jpg (23.32 KiB) Viewed 3696 times

Code: Select all

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
อ้างอิงจาก : http://twitter.github.io/bootstrap/

User avatar
boo_kyoshii
PHP Super Member
PHP Super Member
Posts: 343
Joined: 02/08/2013 10:08 am

Re: วิธีใช้ Icons by Glyphicons ใน Bootstrap

Post by boo_kyoshii » 21/08/2013 11:04 am

ทดลองทำตามค่ะ
icon.jpg
ผลที่ได้
icon.jpg (15.04 KiB) Viewed 3494 times
testbootstrap.zip
ไฟล์ที่ทำทั้งหมดค่ะ
(87.81 KiB) Downloaded 242 times

Post Reply

Return to “Booststap Knowledge”

Users browsing this forum: Google [Bot] and 3 guests