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

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

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

Panchalee
PHP Hero Member
PHP Hero Member
โพสต์: 111
ลงทะเบียนเมื่อ: 30/10/2017 10:10 am

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

โพสต์โดย Panchalee » 31/10/2017 6:01 pm

Font Awesome (ฟอนท์ ออซัม) คืออะไร เป็นฟอนท์ธรรมดา เพียงแต่ว่าในแต่ละ Glyph (กลิฟ) จะเป็นไอคอนต่างๆ แทนที่จะเป็นตัวหนังสือเหมือนกับฟอนท์อื่นๆ
ใช้ Font Awesome ดีกว่าอย่างไร?

    1. ใช้แค่ฟอนท์เดียว แต่สามารถได้ใช้ไอคอนดีๆได้มากกว่า 360 ไอคอน
    2. ตกแต่งสไตล์เพิ่มเติมได้ด้วย CSS
    3. สามารถปรับขนาดได้โดยง่าย และยังแสดงผลๆด้อย่างคมชัด
    4. ออกแบบมาเพื่อใช้งานกับ Bootstrap โดยเฉพาะ
    5. สามารถใช้ได้ฟรี

ขั้นตอนการใส่ไอคอน ด้วย 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
font_awesome_bullets (1).png (1.73 KiB) เปิดดู 23 ครั้ง


อ้างอิง : http://www.siamhtml.com/%E0%B9%83%E0%B8 ... t-awesome/

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน