เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Posted: **12/07/2016 5:46 pm**

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

: iconn.png (30.73 KiB) Viewed 1451 times

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

: i.png (29.71 KiB) Viewed 1451 times

Code: Select all

<!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>