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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: การใช้ icon ไอคอน ใน bootstrap บูส แตร๊ป

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

by 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) Viewed 1446 times
ดังนั้นการเรียกใช้งาน icon (ไอคอน) ของ Bootstrap (บูส แตร๊ป) จะมีตัวอย่าง code (โค้ด) ในการเรียกใช้งาน
i.png
i.png (29.71 KiB) Viewed 1446 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>

Top