การใส่ icon (ไอคอน) ลงใน Bootstrap (บูธสแทร็ป)

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

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

User avatar
Panchalee
PHP Super Member
PHP Super Member
Posts: 296
Joined: 30/10/2017 10:10 am

การใส่ icon (ไอคอน) ลงใน Bootstrap (บูธสแทร็ป)

Post by Panchalee »

Font Awesome (ฟอนท์ ออซัม) คืออะไร เป็นฟอนท์ธรรมดา เพียงแต่ว่าในแต่ละ Glyph (กลิฟ) จะเป็นไอคอนต่างๆ แทนที่จะเป็นตัวหนังสือเหมือนกับฟอนท์อื่นๆ
ใช้ Font Awesome ดีกว่าอย่างไร?
  • 1. ใช้แค่ฟอนท์เดียว แต่สามารถได้ใช้ไอคอนดีๆได้มากกว่า 360 ไอคอน
  • 2. ตกแต่งสไตล์เพิ่มเติมได้ด้วย CSS
  • 3. สามารถปรับขนาดได้โดยง่าย และยังแสดงผลๆด้อย่างคมชัด
  • 4. ออกแบบมาเพื่อใช้งานกับ Bootstrap โดยเฉพาะ
  • 5. สามารถใช้ได้ฟรี
ขั้นตอนการใส่ไอคอน ด้วย Font Awesome

ขั้นตอนที่ 1 : ให้สร้าง Unordered List (ul) ขึ้นมา จะเขียนโค้ดได้ ดังนี้

Code: Select all

<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 ดังนี้

Code: Select all

@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" ดังนี้

Code: Select all

.menu{
 list-style:none;
}
.menu > li:before{
 font-family:FontAwesome;
 content:"\f179"; /* unicode for icon-apple */
 margin-right:5px;
}
จะได้รูปออกมา ดังนี้
font_awesome_bullets (1).png
font_awesome_bullets (1).png (1.73 KiB) Viewed 996 times
อ้างอิง : http://www.siamhtml.com/%E0%B9%83%E0%B8 ... t-awesome/
  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests