ใช้งานไอค่อนในเว็บไซต์จาก Font Awesome

Font Awesome คืออะไร?

ขอเกริ่นก่อนเลยแล้วกันครับว่ามันคือไอค่อนต่างที่เราใช้กันบนเว็บไซต์นั่นแหละ และข้อดีคือมันเป็น Vector icon แล้วไอ้เจ้า Vector icon นี่มันคืออะไรหว่า จริงๆมันก็คือ icon ที่ขยายยังไงก็ไม่แตกนั่นแหละครับ คมชัด กริ๊บเหมือนเดิม ไม่ว่าจะขยายให้ใหญ่ขนาดไหนก็ตาม นั่นคือข้อดีของมัน

ทำไมถึงต้องใช้ Font Awesome?

ปกติเวลาผมรับงานออกแบบมาจากดีไซน์เนอร์เค้ามักจะส่งไฟล์พวก PSD หรือไม่ก็ XD มาให้ ซึ่งในนั้นมันจะมีไอค่อนต่างๆอยู่มากมาย(มั้งนะ) พอเราจะนำมันมาใส่ในหน้าเว็บงี้ เรามีทางเลือกอยู่ 2 ทาง ทางแรกคือขอให้ดีไซน์เนอร์เค้า export มันออกมาให้ หรือทำเองครับ ก็คือจิ้มบน layer ในไฟล์ดีไซน์แล้ว export ออกมาเอง ซึ่งผมก็ไม่ได้ขยันอะไรขนาดนั้น แต่ก็ไม่ได้ชอบรอขนาดนั้นอีกนั่นแหละ เผื่อฝั่งดีไซน์เนอร์เค้าไม่ว่างทำให้ เราก็ต้องรอเค้าอยู่ดี ทางเลือกของเราก็เลยต้องเป็นเลือกใช้งาน Font Awesome ซึ่งมันมีไอค่อนส่วนใหญ่ให้เลือกใช้อยู่แล้ว เรียกว่าครบถ้วนเลยแหละ

ไม่ใช่ว่ามันมีแค่ Font Awesome นะครับ มีหลายตัวให้เลือกใช้ แค่ตัวนี้เป็นตัวที่คุ้นเคยกันดี ใช้งานได้ง่าย และมีไอค่อนให้เลือกใช้มากมายนั่นเอง

การใช้งาน Font Awesome บนเว็บไซต์

ก่อนอื่นก็โหลดมาจากเว็บไซต์หลักได้เลยครับ โหลดจากหน้านี้ได้

https://fontawesome.com/start

พอโหลดมาเสร็จก็เอาไปวางไว้ในเว็บของเรา ถ้าเป็น WordPress ส่วนใหญ่ผมจะวางไว้ในโฟลเดอร์ของธีมมันนั่นแหละ จะได้เรียกใช้ง่ายๆ ส่วนถ้าเป็นเว็บทั่วๆไปผมก็มักจะวางใน folder ชื่อ assets แล้วแต่สะดวกเลย

เรียกใช้งาน Web Fonts ด้วย CSS

เป็นการเรียก CSS ไฟล์ปกติทั่วไปด้วยการเรียก link ใน head ของไฟล์ html และเรียกใช้งาน class ของไอค่อนต่างๆใน body ตามตัวอย่างด้านล่างนี้

<head>
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

เรียกใช้งาน SVG ด้วย JavaScript

เป็นการเรียก JavaScript ไฟล์ปกติทั่วไปด้วยการเรียกแท็ก script ใน head ของไฟล์ html และเรียกใช้งาน class ของไอค่อนต่างๆใน body ตามตัวอย่างด้านล่างนี้

<head>
  <script defer src="/your-path-to-fontawesome/js/all.js"></script> <!--load all styles -->
</head>
<body>
  <i class="fas fa-user"></i> <!-- uses solid style -->
  <i class="far fa-user"></i> <!-- uses regular style -->
  <i class="fal fa-user"></i> <!-- uses light style -->
  <!--brand icon-->
  <i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>

หลักๆการใช้งานก็มีอยู่ประมาณโน้นแหละครับ แต่ก็ยังมีวิธีที่เจาะจงกว่านั้นคือการเรียกแค่ที่ใช้งานจริงๆเช่น solid กับ brand เป็นต้น

ใช้งาน Font Awesome ใน WordPress Theme

เนื่องจากส่วนตัวผมขึ้นโปรเจ็คด้วย WordPress ก็เลยคิดว่าเขียนแปะไว้หน่อยก็ดี ในโฟลเดอร์ธีมเนี่ย ผมก็ชอบสร้างโฟลเดอร์นึงชื่อ libs ไว้สำหรับเก็บไฟล์พวกนี้ไว้ใช้งาน เช่น Bootstrap, Font Awesome, Slick, Redux Framework อะไรแบบนั้น

การเรียกใช้ก็ง่ายๆครับ ในไฟล์ functions.php แล้วใส่โค้ดด้านล่างเข้าไปในฟังก์ชันที่มัน enqueue style สำหรับธีมเลยครับ เป็นอันเรียบร้อย

wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/libs/font-awsome/css/all.css', array(), wp_get_theme()->get( 'Version' ) );

วิธีเช็คง่ายๆว่ามันเวิร์คมั้ยก็แค่ไปที่หน้าเว็บแล้วคลิ๊กขวา กด view source ดูครับ ถ้าเจอ font-awesome ก็คือเวิร์คนั่นแหละ ง่ายมาก

โน้ตเพิ่มเติม

เวลาอัพขึ้นเว็บอย่าลืมโฟลเดอร์ webfonts นะครับ ไม่งั้นมันจะหาไฟล์ไม่เจอสำหรับการใช้งานด้วย CSS และอย่าลืมโฟลเดอร์ svgs สำหรับใช้งานด้วย JavaScript

Leave a comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *