ใส่ Icons ใน Bootstrap ง่ายๆ ด้วย Font Awesome

Published in

SiamHTML

3 min readJul 6, 2013

โดยปกติแล้ว เวลาเราอยากจะเอา icons มาใส่บนหน้าเว็บของเรา เราก็จะต้องไปหารูป icons ที่เราอยากได้มา แล้วเราก็จะต้องเขียน css เพื่อจัดตำแหน่งให้กับ icons เหล่านั้นใช่มั้ยล่ะครับ กว่าเราจะหา icons ที่ถูกใจได้ครบ อาจจะต้องใช้เวลา แถมยังต้องมาเขียน css เพิ่มอีก ปัญหาเหล่านี้จะหมดไปด้วย Font Awesome ครับ

Font Awesome คืออะไร?

ชื่อก็บอกอยู่แล้วนะครับว่า “Font Awesome” จริงๆ แล้วมันก็คือ font ธรรมดาๆ font หนึ่งนั่นเองครับ เพียงแต่ว่าในแต่ละ “Glyph” ของ font นี้ จะเป็น icons ต่างๆ แทนที่จะเป็นตัวหนังสือเหมือน font อื่นๆ ครับ จะดีแค่ไหนหากเราได้ Icon ที่ต้องการมาด้วยการพิมพ์โค้ดเพียงไม่กี่ตัว

แล้วใช้ Font Awesome มันดีกว่ายังไง?

One Font, 360+ Iconsลงแค่ font เดียว ก็เหมือนได้ Icons ดีๆ มาใช้นับไม่ถ้วน
CSS Controlตกแต่งสไตล์เพิ่มเติมได้อย่างง่ายดายด้วย CSS
Infinite Scalabilityสามารถปรับขนาดได้โดยง่าย และยังแสดงผลได้อย่างคมชัด เพราะเป็น SVG
Made for Bootstrapออกแบบมาเพื่อให้ใช้ได้กับ Bootstrap โดยเฉพาะ
Freeสามารถใช้ได้ฟรี แม้จะเป็น Commercial Use ก็ตาม

Workshop — ใส่ Icons ด้วย Font Awesome

ไม่รอช้าครับ เรามาเริ่มลงมือใช้ Font Awesome กันเลย ให้เราสร้าง Unordered List(ul) ขึ้นมาสักอันหนึ่ง จะได้โค้ด html แบบนี้ครับ

<body>
    <ul class="menu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </li>
</body>

ทีนี้เราไม่ชอบ bullet แบบ default ของ <ul> เราจึงหันมาใช้ Icon ของ Font Awesome แทน ให้เรา Download Font Awesome มาครับ จากนั้น ให้เราแตกไฟล์ออกมา เราจะได้ folder ที่ชื่อว่า “font-awesome” ซึ่งภายในจะประกอบไปด้วย folder ย่อยอีก 4 folders ด้วยกัน ได้แก่ “css”, “font”, “less” และ “scss” โดย folder ที่ชื่อ “font” จะเป็น folder ที่เอาไว้เก็บไฟล์ font ของ Font Awesome เอาไว้ครับ ให้เราเขียน @font-face rule เพื่อเตรียมพร้อมสำหรับการใช้งาน Font Awesome ตามโค้ดด้านล่างนี้ครับ

@font-face {
    font-family: FontAwesome;
    src: url('font-awesome/font/fontawesome-webfont.eot');
    src: url('font-awesome/font/fontawesome-webfont.eot?') format('embedded-opentype'),
         url('font-awesome/font/fontawesome-webfont.woff') format('woff'),
         url('font-awesome/font/fontawesome-webfont.ttf') format('truetype');
}

เพียงเท่านี้เราก็จะพร้อมใช้งาน Font Awesome แล้วล่ะครับ ให้เราลองใส่โค้ดตามด้านล่างนี้ เพื่อเป็นการเปลี่ยน bullet แบบ default ของ <ul> มาใช้ icon ของ Font Awesome ที่ชื่อว่า “icon-apple” แทน

.menu{
	list-style:none;
}
.menu > li:before{
	font-family:FontAwesome;
	content:"\f179";	/* unicode for icon-apple */
	margin-right:5px;
}

บางคนอาจสงสัยว่า แล้ว “\f179” คืออะไร มาจากไหน มันคืออักขระแบบ unicode ครับ สำหรับ Font Awesome แล้วโค้ด “\f179” จะใช้แทน icon รูป apple นั่นเอง แล้วแบบนี้ เราต้องมานั่งจำ unicode งั้นหรือ? ไม่จำเป็นครับ หากใครไม่อยากจำ unicode สำหรับ icons ต่างๆ ของ Font Awesome ให้เราใส่โค้ดต่อไปนี้

<link rel="stylesheet" href="font-awesome/css/font-awesome.css">

สไตล์ชีทของ Font Awesome จะเข้ามาช่วยให้เราใช้งานได้สะดวกมากขึ้นครับ จากนี้ไป เวลาเราอยากได้ icon อะไร ให้เราสร้าง html <i> element ขึ้นมา แล้วเอาชื่อของ icon นั้นๆ ใส่ให้เป็นชื่อ class ของ <i> ได้เลยแบบนี้ครับ

<i class="icon-apple"></i>

จากตัวอย่างก่อนหน้านี้ โค้ดเราก็จะกลายมาเป็นแบบนี้ครับ

<body>
    <ul class="menu">
        <li><i class="icon-apple"></i>Item 1</li>
        <li><i class="icon-apple"></i>Item 2</li>
        <li><i class="icon-apple"></i>Item 3</li>
        <li><i class="icon-apple"></i>Item 4</li>
    </li>
</body>

เพียงโค้ดสั้นๆ เท่านี้ เราก็จะได้ icon ที่ต้องการมาแล้วล่ะครับ สำหรับรายการ icons ทั้งหมด พร้อม unicode เราสามารถเข้าไปดูได้ที่ Font Awesome Icons นอกจากนี้ Font Awesome ยังมีลูกเล่นต่างๆ มากมาย ไม่ว่าจะเป็น การปรับขนาดของ icon, การใส่ border ให้กับ icon รวมไปถึงการ rotate ลูกเล่นทั้งหมดนี้ เราสามารถทำได้อย่างง่ายดายเพียงแค่เพิ่ม class เข้าไปที่ <i> element ครับ เพื่อนๆ สามารถเข้าไปดูรายละเอียดทั้งหมดได้ที่ Font Awesome Examples

ใช้ Font Awesome ร่วมกับ Bootstrap

หากเราอยากจะใช้ Font Awesome ร่วมกับ Bootstrap เราก็แค่เพิ่มสไตล์ชีทของ Bootstrap เข้าไปครับ

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">

ทีนี้หากเราอยากจะใส่ icons ของ Font Awesome เข้าไปใน buttons ของ Bootstrap ก็สามารถเขียนแบบนี้ได้เลยครับ

<body>
    <a class="btn" href="#">
		<i class="icon-repeat"></i> Reload
	</a>
	<a class="btn btn-success" href="#">
		<i class="icon-shopping-cart icon-large"></i> Checkout
	</a>
	<a class="btn btn-large btn-primary" href="#">
		<i class="icon-comment"></i> Comment
	</a>
	<a class="btn btn-small btn-info" href="#">
		<i class="icon-info-sign"></i> Info
	</a>
	<a class="btn btn-danger" href="#">
		<i class="icon-trash icon-large"></i> Delete
	</a>
	<a class="btn btn-small" href="#">
		<i class="icon-cog"></i> Settings
	</a>
	<a class="btn btn-large btn-danger" href="#">
		<i class="icon-flag icon-2x pull-left"></i> Font Awesome<br>Version 3.2.1
	</a>
	<a class="btn btn-primary" href="#">
		<i class="icon-refresh icon-spin"></i> Synchronizing Content...
	</a>
</body>

นอกจากจะเอา Font Awesome มาใช้ร่วมกับ buttons ของ Bootstrap ได้แล้ว เรายังสามารถนำไปใช้ร่วมกับ bulleted lists, navigation รวมไปถึง form input ได้อีกด้วย เพื่อนๆ ลองนำไปประยุกต์ใช้ดูนะครับ

ใส่ Icons ใน Bootstrap ง่ายๆ ด้วย Font Awesome

Font Awesome คืออะไร?

แล้วใช้ Font Awesome มันดีกว่ายังไง?

Workshop — ใส่ Icons ด้วย Font Awesome

ใช้ Font Awesome ร่วมกับ Bootstrap

Written by Suranart Niamcome