ใช้ Font Awesome ดีกว่าอย่างไร?
- 1. ใช้แค่ฟอนท์เดียว แต่สามารถได้ใช้ไอคอนดีๆได้มากกว่า 360 ไอคอน
- 2. ตกแต่งสไตล์เพิ่มเติมได้ด้วย CSS
- 3. สามารถปรับขนาดได้โดยง่าย และยังแสดงผลๆด้อย่างคมชัด
- 4. ออกแบบมาเพื่อใช้งานกับ Bootstrap โดยเฉพาะ
- 5. สามารถใช้ได้ฟรี
ขั้นตอนที่ 1 : ให้สร้าง Unordered List (ul) ขึ้นมา จะเขียนโค้ดได้ ดังนี้
โค้ด: เลือกทั้งหมด
<body>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</li>
</body>
โค้ด: เลือกทั้งหมด
@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');
}
โค้ด: เลือกทั้งหมด
.menu{
list-style:none;
}
.menu > li:before{
font-family:FontAwesome;
content:"\f179"; /* unicode for icon-apple */
margin-right:5px;
}
อ้างอิง : http://www.siamhtml.com/%E0%B9%83%E0%B8 ... t-awesome/