การใช้ icon ไอคอน ใน bootstrap บูส แตร๊ป

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

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

sonram
PHP Sr. Member
PHP Sr. Member
โพสต์: 81
ลงทะเบียนเมื่อ: 11/07/2016 10:05 am

การใช้ icon ไอคอน ใน bootstrap บูส แตร๊ป

โพสต์โดย sonram » 12/07/2016 5:46 pm

การใช้ icon ไอคอน ใน bootstrap บูส แตร๊ป หากจะใส่ icon ไอคอน บนเว็บไซต์เมื่อก่อนเป็นเรื่องที่ปวดหัว ต้อง download (ดาวน์โหลด) รูปภาพนั้นๆมาลงที่เครื่อง ซึ่งแน่นอนรูปภาพนั้นอาจจะใหญ่หรือเล็กเกินไป หากรูปใหญ่ไม่มีปัญหาอะไร แต่ถ้ารูปเล็กเกินไปแล้วนำมาใช้รูปก็แตกอีก แต่ปัจจุบันได้มีวิธีการใส่ icon (ไอคอน) ในรูปแบบใหม่ใช้งานง่ายและรูปไม่แตก คือ Bootstrap Glyphicons
Bootstrap Glyphicons ใช้งานง่ายโดยการเขียน class icon (คลาส ไอคอน) นั้นๆ สามารถดูได้ในเว็บไซต์ของ Bootstrap (บูส แตร๊ป) หรือดูได้จากรูปด้านล่างนี้ เป็นเพียงส่วนหนึ่งของ icon (ไอคอน) ทั้งหมด
iconn.png
iconn.png (30.73 KiB) เปิดดู 431 ครั้ง


ดังนั้นการเรียกใช้งาน icon (ไอคอน) ของ Bootstrap (บูส แตร๊ป) จะมีตัวอย่าง code (โค้ด) ในการเรียกใช้งาน
i.png
i.png (29.71 KiB) เปิดดู 431 ครั้ง


โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <title></title>
   <style type="text/css">
      i{
         font-size: 30px;
      }
   </style>
</head>
<body>

<i class="glyphicon glyphicon-step-backward"></i>glyphicon glyphicon-step-backward
<br>
<i class="glyphicon glyphicon-floppy-save"></i>
glyphicon glyphicon-floppy-save
<br>
<i class="glyphicon glyphicon-backward"></i>
glyphicon glyphicon-backward
<br>
<i class="glyphicon glyphicon-folder-open"></i>
glyphicon glyphicon-folder-open
<br>
<i class="glyphicon glyphicon-bell"></i>
glyphicon glyphicon-bell

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน