ไอคอน Font Awesome

ไลบรารีไอคอน Font Awesome มีไอคอนเวกเตอร์ที่ปรับขนาดได้ฟรี 519 ไอคอน ห้องสมุดนี้ฟรีสำหรับการใช้งานส่วนตัวและเชิงพาณิชย์ เดิมออกแบบมาสำหรับ Bootstrap ไอคอนเหล่านี้สามารถปรับแต่งได้อย่างง่ายดาย

กำลังโหลด Font Library

ในการโหลดไลบรารี Font Awesome ให้คัดลอกและวางบรรทัดต่อไปนี้ในส่วน <head> ของเว็บเพจ

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

การใช้ไอคอน

Font Awesome มีไอคอนมากมาย เลือกหนึ่งในนั้นและเพิ่มชื่อของคลาสไอคอนให้กับองค์ประกอบ HTML ใด ๆ ภายในแท็ก <body> ในตัวอย่างต่อไปนี้เราได้ใช้ไอคอนของสกุลเงินอินเดีย

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดขนาด

คุณสามารถเพิ่มหรือลดขนาดของไอคอนได้โดยกำหนดขนาดโดยใช้ CSS และใช้ร่วมกับชื่อคลาสดังที่แสดงด้านล่าง ในตัวอย่างที่กำหนดเราได้ประกาศขนาดเป็น 6 em

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -

การกำหนดสี

เช่นเดียวกับขนาดคุณสามารถกำหนดสีของไอคอนโดยใช้ CSS ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนสีของไอคอนสกุลเงินของอินเดีย

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

รายการหมวดหมู่

Font Awesome มี 519 ไอคอนในหมวดหมู่ต่อไปนี้ -

ไอคอนโปรแกรมประยุกต์บนเว็บ
ไอคอนมือ
ไอคอนการขนส่ง
ไอคอนเพศ
ไอคอนประเภทไฟล์
ไอคอนสปินเนอร์
ไอคอนควบคุมฟอร์ม
ไอคอนการชำระเงิน
ไอคอนแผนภูมิ
ไอคอนสกุลเงิน
ไอคอนแก้ไขข้อความ
ไอคอนทิศทาง
ไอคอนเครื่องเล่นวิดีโอ
ไอคอนแบรนด์

ในการใช้ไอคอนเหล่านี้คุณต้องแทนที่ชื่อคลาสในโปรแกรมที่กำหนดในบทนี้ด้วยชื่อคลาสของไอคอนที่ต้องการ ในบทต่อ ๆ ไปของหน่วยนี้ (Font Awesome) เราได้อธิบายการใช้งานหมวดหมู่อย่างชาญฉลาดและผลลัพธ์ตามลำดับของไอคอน Font Awesome ต่างๆ