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

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

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

sonram
PHP Sr. Member
PHP Sr. Member
Posts: 81
Joined: 11/07/2016 10:05 am

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

Post by sonram »

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests