Font Awesome (ฟอนท์ ออซัม) คืออะไร เป็นฟอนท์ธรรมดา เพียงแต่ว่าในแต่ละ Glyph (กลิฟ) จะเป็นไอคอนต่างๆ แทนที่จะเป็นตัวหนังสือเหมือนกับฟอนท์อื่นๆ
ใช้ Font Awesome ดีกว่าอย่างไร?
- 1. ใช้แค่ฟอนท์เดียว แต่สามารถได้ใช้ไอคอนดีๆได้มากกว่า 360 ไอคอน
- 2. ตกแต่งสไตล์เพิ่มเติมได้ด้วย CSS
- 3. สามารถปรับขนาดได้โดยง่าย และยังแสดงผลๆด้อย่างคมชัด
ขั้นตอนการใส่ไอคอน ด้วย Font Awesome
ขั้นตอนที่ 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>
ขั้นตอนที่ 2 : ให้ดาวน์โหลด
Font Awesome มา หลังจากนั้น ให้แตกไฟล์อกมา จะได้โฟลเดอร์ชื่อ "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');
}
ขั้นตอนที่ 3 : ทดลองเปลี่ยนโค้ด จาก Bullet ที่เป็น default ของ <ul> มาลองใช้ไอคอนของ Font Awesome แทน โดยใช้ "icon-apple" ดังนี้
โค้ด: เลือกทั้งหมด
.menu{
list-style:none;
}
.menu > li:before{
font-family:FontAwesome;
content:"\f179"; /* unicode for icon-apple */
margin-right:5px;
}
จะได้รูปออกมา ดังนี้
- font_awesome_bullets (1).png (1.73 KiB) Viewed 1846 times
อ้างอิง :
http://www.siamhtml.com/%E0%B9%83%E0%B8 ... t-awesome/
[b]Font Awesome (ฟอนท์ ออซัม) [/b]คืออะไร เป็นฟอนท์ธรรมดา เพียงแต่ว่าในแต่ละ Glyph (กลิฟ) จะเป็นไอคอนต่างๆ แทนที่จะเป็นตัวหนังสือเหมือนกับฟอนท์อื่นๆ
ใช้ Font Awesome ดีกว่าอย่างไร?
[list]1. ใช้แค่ฟอนท์เดียว แต่สามารถได้ใช้ไอคอนดีๆได้มากกว่า 360 ไอคอน[/list]
[list]2. ตกแต่งสไตล์เพิ่มเติมได้ด้วย CSS[/list]
[list]3. สามารถปรับขนาดได้โดยง่าย และยังแสดงผลๆด้อย่างคมชัด[/list]
[list]4. ออกแบบมาเพื่อใช้งานกับ [url=https://www.mindphp.com/forums/viewtopic.php?f=76&t=22169]Bootstrap[/url] โดยเฉพาะ[/list]
[list]5. สามารถใช้ได้ฟรี[/list]
[b]ขั้นตอนการใส่ไอคอน ด้วย Font Awesome[/b]
[b]ขั้นตอนที่ 1[/b] : ให้สร้าง Unordered List (ul) ขึ้นมา จะเขียนโค้ดได้ ดังนี้
[code]<body>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</li>
</body>[/code]
[b]ขั้นตอนที่ 2[/b] : ให้ดาวน์โหลด[url=http://fontawesome.io/]Font Awesome[/url] มา หลังจากนั้น ให้แตกไฟล์อกมา จะได้โฟลเดอร์ชื่อ "Font Awesome" หลังจากนั้นให้เราเขียน @font-face rule เพื่อเตรียมสำหรับการใช้งาน Font Awesome ดังนี้
[code]@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');
}[/code]
[b]ขั้นตอนที่ 3[/b] : ทดลองเปลี่ยนโค้ด จาก Bullet ที่เป็น default ของ <ul> มาลองใช้ไอคอนของ Font Awesome แทน โดยใช้ "icon-apple" ดังนี้
[code].menu{
list-style:none;
}
.menu > li:before{
font-family:FontAwesome;
content:"\f179"; /* unicode for icon-apple */
margin-right:5px;
}[/code]
จะได้รูปออกมา ดังนี้
[attachment=0]font_awesome_bullets (1).png[/attachment]
อ้างอิง : http://www.siamhtml.com/%E0%B9%83%E0%B8%AA%E0%B9%88-bootstrap-icons-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-font-awesome/