การใช้งาน Font Awesome 4.7

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

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

abdkode
PHP Super Member
PHP Super Member
โพสต์: 248
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

การใช้งาน Font Awesome 4.7

โพสต์โดย abdkode » 14/01/2019 11:36 am

การใช้ Font Awesome หรือ icon font เป็นที่นิยมชมชอบของเหล่า Web Developer ทั้งหลายนะครับ ด้วยคุณสมบัติของตัวหนังสือที่มีหน้าตาเป็นไอคอน ประหยัดเวลาและทำให้หน้าเว็บโหลดเร็วขึ้นและสามารถทดแทนการใช้ไฟล์รูปได้อย่างสมบูรณ์แบบเลยทีเดียว แถมยังใช้ง่ายกว่ามาก ๆ ทำให้เว็บหลายต่อหลายเว็บหยิบเจ้าตัวนี้ไปใช้กันอย่างสนุกสนานเลยครับ ส่วนวิธีการใช้งานั้น ก่อนอื่นดาวโหลดไฟล์ css นี้เก่อน
ดาวโหลดที่นี่
จากนั้น เมื่อดาวน์โหลดไฟล์มาใส่ในโฟลเดอร์เว็บไซต์ของเราหรือโฟลเดอร์โปรเจคแล้ว
ให้ใส่ HTML ใน <head> ตามนี้เลยนะครับ

โค้ด: เลือกทั้งหมด

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

path/to/font-awesome/css คือตำแหน่งที่ตั้งของไฟล์ที่เราดาวโหลดมาครับ ใส่ให้ถูกต้องด้วยน่ะครับ

วิธีการใช้ Font Awesome
วิธีใช้งานง่ายๆเลยครับ ให้เราเลือกชื่อไอคอนหรือคลาสที่เราต้องการใช้สักตัว ซึ่งปกติแล้วจะขียนในรูบแบบ fa fa-xxxxx
เช่น

โค้ด: เลือกทั้งหมด

<i class="fa fa-phone"></i>fa fa-phone

phone.jpg
phone.jpg (3.03 KiB) เปิดดู 700 ครั้ง

ส่วนชื่อไอคอนเพิ่มเติม เราสามารถดูได้จากที่นี่ครับ
คำว่า fa คืออะไร จริงๆคำนี้น่าจะหมายถึงFont Awesome เพื่อบอกให้รู้ว่าเรากำลังใช้ Font Awesome
นอกจากนั้น Font Awesome สามารถกำหนดให้มันใหญ่ขึ้น เพียงเพิ่มคลาส fa-lg, fa-2x, fa-3x, fa-4x, fa-5x ไว้หลังคำว่า fa fa-xxxxx มันจะมีขนาดที่แตกต่างกันไป ดังตัวอย่างนี้

โค้ด: เลือกทั้งหมด

<i class="fa fa-phone fa-lg"></i>
<i class="fa fa-phone fa-2x"></i>
<i class="fa fa-phone fa-3x"></i>
<i class="fa fa-phone fa-4x"></i>
<i class="fa fa-phone fa-5x"></i>


ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
--สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS

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

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

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

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