เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

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

Post a reply

Username:

Subject:

Confirmation code: In an effort to prevent automatic submissions, we require that you complete the following challenge.

Smilies

View more smilies

BBCode is ON
[img] is ON
[flash] is ON
[url] is ON
Smilies are ON

Topic review

[quote=abdkode post_id=139692 time=1547440587 user_id=26415]
การใช้ Font Awesome หรือ icon font เป็นที่นิยมชมชอบของเหล่า Web Developer ทั้งหลายนะครับ ด้วยคุณสมบัติของตัวหนังสือที่มีหน้าตาเป็นไอคอน ประหยัดเวลาและทำให้หน้าเว็บโหลดเร็วขึ้นและสามารถทดแทนการใช้ไฟล์รูปได้อย่างสมบูรณ์แบบเลยทีเดียว แถมยังใช้ง่ายกว่ามาก ๆ ทำให้เว็บหลายต่อหลายเว็บหยิบเจ้าตัวนี้ไปใช้กันอย่างสนุกสนานเลยครับ ส่วนวิธีการใช้งานั้น ก่อนอื่นดาวโหลดไฟล์ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]css[/url] นี้เก่อน
[url=https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip]ดาวโหลดที่นี่[/url]
จากนั้น เมื่อดาวน์โหลดไฟล์มาใส่ในโฟลเดอร์เว็บไซต์ของเราหรือโฟลเดอร์โปรเจคแล้ว 
ให้ใส่ HTML ใน <head> ตามนี้เลยนะครับ
[code]<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">[/code]
[color=#0080BF]path/to/font-awesome/css[/color] คือตำแหน่งที่ตั้งของไฟล์ที่เราดาวโหลดมาครับ ใส่ให้ถูกต้องด้วยน่ะครับ

[b]วิธีการใช้ Font Awesome[/b]
วิธีใช้งานง่ายๆเลยครับ ให้เราเลือกชื่อไอคอนหรือคลาสที่เราต้องการใช้สักตัว ซึ่งปกติแล้วจะขียนในรูบแบบ fa fa-xxxxx 
เช่น 
[code]fa fa-phone[/code]
phone.jpg
ส่วนชื่อไอคอนเพิ่มเติม เราสามารถดูได้จาก[url=https://fontawesome.com/v4.7.0/icons/]ที่นี่[/url]ครับ
คำว่า fa คืออะไร จริงๆคำนี้น่าจะหมายถึงFont Awesome เพื่อบอกให้รู้ว่าเรากำลังใช้ Font Awesome 
นอกจากนั้น Font Awesome สามารถกำหนดให้มันใหญ่ขึ้น เพียงเพิ่มคลาส fa-lg, fa-2x, fa-3x, fa-4x, fa-5x ไว้หลังคำว่า fa fa-xxxxx มันจะมีขนาดที่แตกต่างกันไป ดังตัวอย่างนี้
[code]
 
 
 
[/code]

[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]-สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]
[/quote]

Options

Disable BBCode

Disable smilies

Do not automatically parse URLs

Expand view Topic review: การใช้งาน Font Awesome 4.7

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

Quote abdkode

by abdkode » 14/01/2019 11:36 am

Code: Select all

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

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

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

Code: Select all

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

: phone.jpg (3.03 KiB) Viewed 1296 times

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

Code: Select all

<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

การใช้ Font Awesome หรือ icon font เป็นที่นิยมชมชอบของเหล่า Web Developer ทั้งหลายนะครับ ด้วยคุณสมบัติของตัวหนังสือที่มีหน้าตาเป็นไอคอน ประหยัดเวลาและทำให้หน้าเว็บโหลดเร็วขึ้นและสามารถทดแทนการใช้ไฟล์รูปได้อย่างสมบูรณ์แบบเลยทีเดียว แถมยังใช้ง่ายกว่ามาก ๆ ทำให้เว็บหลายต่อหลายเว็บหยิบเจ้าตัวนี้ไปใช้กันอย่างสนุกสนานเลยครับ ส่วนวิธีการใช้งานั้น ก่อนอื่นดาวโหลดไฟล์ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]css[/url] นี้เก่อน
[url=https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip]ดาวโหลดที่นี่[/url]
จากนั้น เมื่อดาวน์โหลดไฟล์มาใส่ในโฟลเดอร์เว็บไซต์ของเราหรือโฟลเดอร์โปรเจคแล้ว
ให้ใส่ HTML ใน <head> ตามนี้เลยนะครับ
[code]<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">[/code]
[color=#0080BF]path/to/font-awesome/css[/color] คือตำแหน่งที่ตั้งของไฟล์ที่เราดาวโหลดมาครับ ใส่ให้ถูกต้องด้วยน่ะครับ

[b]วิธีการใช้ Font Awesome[/b]
วิธีใช้งานง่ายๆเลยครับ ให้เราเลือกชื่อไอคอนหรือคลาสที่เราต้องการใช้สักตัว ซึ่งปกติแล้วจะขียนในรูบแบบ fa fa-xxxxx
เช่น
[code]fa fa-phone[/code]
[attachment=0]phone.jpg[/attachment]
ส่วนชื่อไอคอนเพิ่มเติม เราสามารถดูได้จาก[url=https://fontawesome.com/v4.7.0/icons/]ที่นี่[/url]ครับ
คำว่า fa คืออะไร จริงๆคำนี้น่าจะหมายถึงFont Awesome เพื่อบอกให้รู้ว่าเรากำลังใช้ Font Awesome
นอกจากนั้น Font Awesome สามารถกำหนดให้มันใหญ่ขึ้น เพียงเพิ่มคลาส fa-lg, fa-2x, fa-3x, fa-4x, fa-5x ไว้หลังคำว่า fa fa-xxxxx มันจะมีขนาดที่แตกต่างกันไป ดังตัวอย่างนี้
[code]



[/code]

[b]ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS[/b]
-[url=https://www.mindphp.com/forums/viewforum.php?f=73]-สอนการใช้งาน HTML & CSS[/url]
-[url=https://www.mindphp.com/forums/viewforum.php?f=20]ถามตอบ HTML CSS[/url]
-[url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]บทเรียน CSS[/url]

Top