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

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใส่ icon (ไอคอน) ลงใน Bootstrap (บูธสแทร็ป)

การใส่ 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) เปิดดู 476 ครั้ง


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

ข้างบน