หน้าเว็บไซต์หลายๆ เว็บจะมีไอคอนสวยๆ วางตามจุดต่างๆ เช่น เมนู ช่องทางการติดต่อ ไอคอน Social Media ซึ่งไอคอนเหล่านี้มีหน้าที่ในการสื่อความหมายในลักษณะเป็นรูปภาพ ทำให้เข้าใจง่าย และทำให้หน้าเว็บของเรามีความน่าสนใจมากขึ้น ไอคอนที่เป็นที่รู้จักและมักนิยมนำมาใช้งาน ได้แก่ ไอคอนที่ชื่อว่า Font Awesome ครับ
ดังนั้นวันนี้เราจะมาพูดถึง วิธีการและขั้นตอนการใช้ในส่วนของ Font Awesome ว่าเราจะสามารถนำไปใช้งานได้อย่างไร บทความนี้เหมาะสำหรับนักพัฒนาเว็บไซต์นะครับ เพราะจะพูดถึงการเขียนโค้ดเล็กๆ น้อย ครับ
เริ่มแรกให้ไปที่หน้าเว็บไซต์ที่ชื่อ Font Awesome เป็นอันดับแรก ปัจจุบันเวอร์ชั่นที่ใช้ของ Font Awesome นี้ คือเวอร์ชั่น 5 ครับ เมื่อเราเข้ามาแล้วเราจะเห็นปุ่ม Start for free และ Get More with Pro ปรากฏอยู่ ซึ่งหมายถึง การใช้ไอคอนจาก Font Awesome นั้นมีแบบฟรี และเสียเงินครับ
ข้อแตกต่างกันระหว่างแบบฟรีและเสียเงินก็คือ ถ้าเราใช้แบบเสียเงิน เราจะได้ไอคอนสำหรับใช้งานมากขึ้นและมีหลากหลายรูปแบบ โดยเพิ่มมากขถึง 5801 ไอคอน และยังสามารถใช้ไอคอนที่เป็นยี่ห้อต่างๆ ได้มากขึ้นด้วย มีเครื่องมือและบริการที่สนับสนุนการทำงานมากขึ้น เช่น การใช้งาน CDN, Private NPM Repository สนับสนุนการทำงานบน Android และ IOS นอกจากนั้นแล้วมีการอัพเดทและบริการแก้ไขปัญหาอีกด้วย ราคาสำหรับแบบเสียเงินจะอยู่ที่ 99US ต่อปี ครับ
การใช้งาน Font Awesome สามารถใช้งานได้ทั้งบนเว็บและคอมพิวเตอร์ครับ โดยวิธีการใช้งานในเว็บไซต์นั้น เราจะต้องทำการดาวน์โหลดและเรียกใช้งานก่อน โดยให้ทำการกดปุ่ม Start For Free ครับ เราสามารถทำการลงทะเบียนเพื่อใช้เป็นชุด Kit ของเราหรือเลื่อนลงมาด้านล่างทำการดาวน์โหลดไฟล์ Zip ลงมายังเครื่องของเราได้เลย
ภายในไฟล์ Zip นั้นจะประกอบไปด้วยไฟล์และโฟลเดอร์ ได้แก่ css, js, less, scss, sprites, svgs และ webfonts ครับ เมื่อเราต้องการเรียกใช้ไฟล์ให้ทำการเรียกด้วยการใช้แท็ก Link ทำการเรียกไฟล์ all.css ในส่วน Head ดังนี้
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>สำหรับการใส่ไอคอน ให้ใส่ไอคอนเข้าไป ณ จุดที่เราต้องการในส่วนของ Body โดยใช้ข้อความอันประกอบด้วย Prefix และชื่อของไอคอน กับ HTML Tag ได้แก่ <i> หรือ <span> ยกตัวอย่างเช่น หากเราอยากได้รูปไอคอนกล้องถ่ายรูป ก็จะเขียนดังตัวอย่างต่อไปนี้
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
สำหรับคำว่า fas นั้นจะเป็นการระบุสไตล์ของ Font Awesome ได้ ซึ่งจะเป็นสไตล์พื้นฐาน (Solid) นอกจากนั้นแล้วยังมีสไตล์อื่นๆ อีก ได้แก่ สไตล์ Regular (far), สไตล์ Light (fal), สไตล์ Duotone (fad) และสไตล์แบรนด์ (fab) สไตล์ที่เราสามารถใช้งานได้ฟรี คือ สไตล์ Solid และสไตล์ Brands ครับ ซึ่งหากดูที่ตารางด้านล่างสไตล์ของไอคอนที่แตกต่างจะทำให้รูปไอคอนมีการดีไซน์ที่แตกต่างกันครับ
ด้านล่างนี้จะเป็นการเรียกและใช้งานทั้งหมดครับ
<head>
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fas fa-camera "></i> <!-- uses solid style -->
<i class="far fa-camera "></i> <!-- uses regular style -->
<i class="fal fa-camera "></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
เราสามารถทำการกำหนดขนาดของไอคอนได้ด้วยการใส่รายละเอียดเพิ่มเติมเข้าไป เช่น ถ้าเราต้องการไอคอนขนาดเล็กให้ใส่ fa-xs เข้าไป แต่ถ้าต้องการไอคอนขนาดใหญ่ก็ใส่เป็น fa-10x
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
เรายังสามารถทำในรูปแบบอื่นๆ ได้อีก เช่น แสดงไอคอนเป็นแบบรายการ (fa-ul และ fa-li) ทำการ Fix ขนาดไอคอน (fa-fw) ทำให้ไอคอนเรามีการเคลื่อนไหวแบบหมุนวน (fa-spin หรือ fa-pulse) การระบุตำแหน่งของไอคอนว่าอยู่ชิดซ้าย (fa-pull-left) หรือชิดขวา (fa-pull-right) ใส่กรอบ (fa-border)
เราสามารถเลือกไอคอนที่เราต้องการได้ โดยให้ไปที่เมนูไอคอน (Icon) ก็จะเห็นรูปไอคอนจำนวนมากที่เราสามารถเลือกใช้งานได้ครับ
หากเราต้องการใช้ Font Awesome นี้ ใน WordPress เราสามารถใช้ปลั๊กอินที่ชื่อว่า ปลั๊กอิน Font Awesome แล้วทำการติดตั้งลงไป เราก็จะสามารถเรียกใช้งานผ่านทาง Editor ของเราได้ครับ
หวังว่าทุกท่านคงจะทำได้นะครับ หากใครต้องการให้ทีมงานทำการออกแบบเว็บไซต์ให้สามารถติดต่อมาได้ที่ หน้าติดต่อเรา นี้ครับ สำหรับบทความหน้าอยากให้เขียนเรื่องอะไรก็บอกกันได้นะครับ สวัสดีครับ..
