icon font big

Icon Font คืออะไร? สอนวิธีใช้และเทคนิคเด็ด ๆ ที่คนทำเว็บห้ามพลาด !!

เมื่อก่อนการจะใส่ไอคอนบนเว็บไซต์ มีวิธีเดียวคือ Download รูปไอคอนแบบ PNG มาใส่ ซึ่งก็ติดปัญหาว่าขนาดของไอคอนจะเปลี่ยนไม่ได้ เปลี่ยนแล้วรูปแตกเป็น Pixel วันนี้จะมาแนะนำการใช้ Icon Font ไอคอนแบบใหม่ที่ย่อขยายได้โดยรูปไม่มีวันแตก แถมใช้ง่ายกว่ารูป PNG อีก และแน่นอนว่าดาวน์โหลดได้ฟรี !!

ปัญหาของการใช้ Icon PNG

การใช้ไอคอนแบบ PNG บนเว็บไซต์ไม่ใช่เรื่องผิดนะครับ ผมเองเมื่อก่อนก็ใช้อยู่บ่อย ๆ หรือตอนนี้ก็ใช้บ้างตามโอกาส อย่างไรก็ตาม ไอคอนแบบ PNG เป็นไฟล์ภาพ ซึ่งไฟล์ภาพเกิดจากจุดสีวางเรียงกันทีละ 1 Pixel เวลาเราย่อ-ขยายรูป จุดสีพวกนี้ก็จะถูกบีบ หรือถูกขยาย ทำให้เกิดปัญหารูปเล็กไปจะดูไม่ออกว่าเป็นอะไร หรือรูปใหญ่ไปจะดูแตก ๆ

ปัญหารูปแตกใน Icon แบบ PNG

ปัญหารูปแตกใน Icon แบบ PNG

ปัญหาอีกอย่าง คือ ถ้าเราใช้รูปไอคอน 1 รูปต่อ 1 ไฟล์ ก็จะมีปัญหาว่าถ้าเรามี 100 ไอคอน ก็ต้องใช้ 100 ไฟล์ การเรียกไฟล์ทีละไฟล์จะทำให้เว็บช้าลง ถ้าใครได้อ่านเกี่ยวกับ Performance ในการโหลดเว็บ จะเจอคนพูดถึงอยู่เสมอว่าการเรียกไฟล์ (หรือ HTTP Request) หลายไฟล์จะยิ่งทำให้เว็บไซต์โหลดช้า

อย่างไรก็ตาม ปัญหานี้แก้ไขได้โดยใช้สิ่งที่เรียกว่า CSS Sprite ซึ่งเป็นการเอารูปที่ใช้ทั้งหมดมาเรียงในรูปเดียวครับ แล้วเลือกแสดงผลโดยใส่รูปเป็น background จากนั้นตั้ง width, height, background-position ใน CSS ช่วย วิธีนี้ช่วยลดจำนวนครั้งการโหลดรูปให้เหลือแค่ 1 ครั้ง และยังทำให้ขนาดรูปโดยรวมลดลงด้วย (ปกติ 10 รูป แยก 1 รูปต่อ 1 ไฟล์ ขนาดรวมกัน 20kb ถ้าใช้ CSS Sprite เหลือรูปเดียว ขนาดแค่ 13kb – อ้างอิงจาก CSS-Trick)

ตัวอย่าง CSS Sprite จาก Servergrove

ตัวอย่าง CSS Sprite จาก Servergrove

ทีนี้มาทำความรู้จักกับ Icon Font กันครับ ว่ามันทำงานยังไง และมีข้อดียังไงบ้าง

Icon Font คืออะไร มีประโยชน์ยังไง

ถ้าใครได้อ่านบทความ เทคนิคการทำเว็บไซต์ให้รองรับ Retina-Display น่าจะได้ยินเรื่อง Icon Font กันมาแล้วครับ ฟ้อนต์ที่เราใช้กันทั่วไปจะสังเกตได้ว่ามันย่อขยายแล้วไม่แตกครับ เพราะมันเกิดขึ้นมาจาก Vector (วาดรูปด้วยรูปทรงเลขาคณิต หรือเส้น วาดในโปรแกรมพวก Adobe Illustrator) ไม่ใช่จุดสีทีละ 1 Pixel แบบรูป PNG (เรียกว่า Raster วาดในโปรแกรมพวก Adobe Photoshop) พอเราเอาไอคอนมาทำเป็นฟ้อนต์ เราก็จะสามารถย่อ-ขยายได้โดยที่รูปไม่แตกนั่นเองครับ

ตัวอย่าง Icon Font ของ Font Awesome - ย่อขยายยังไงก็ไม่แตก

ตัวอย่าง Icon Font ของ Font Awesome – ย่อขยายยังไงก็ไม่แตก

นอกจากนั้น สำหรับปัญหาของ PNG ที่ว่าต้องแยก 1 ไอคอนต่อ 1 ไฟล์ การใช้ Icon Font จะทำให้เรารวมทุกไอคอนในไฟล์ฟ้อนต์ไฟล์เดียวได้ ทำให้เราโหลดไฟล์แค่ 1 ไฟล์เท่านั้น โดยใช้ CSS3 Font Face ในการโหลดไฟล์ฟ้อนต์เข้ามาใช้ครับ

จุดเด่นอีกอย่างของ Icon Font คือ พอเอามาใส่ในหน้าเว็บไซต์ มันจะเหมือนเราใส่ตัวหนังสือ 1 ตัวครับ ทำให้เราสามารถใช้ CSS ตกแต่งได้ตามสะดวกเลย ไม่ว่าจะใส่สีด้วย color, ปรับขนาดด้วย font-size, ใส่เงาด้วย font-shadow, หรือแม้แต่หมุนไอคอนด้วย CSS3 Transform ก็ทำได้ครับ

ที่สำคัญคือ Icon Font ใช้ง่ายมาก ๆ บางคนอ่านข้างบนแล้วงง ๆ ว่าแต่ละเทคนิคที่พูดถึงคืออะไรบ้าง เราไม่ต้องรู้ทั้งหมดนะครับ เพราะเค้าทำแบบสำเร็จรูปมาให้เราใช้เรียบร้อยแล้ว !!

รู้จักกับ Font Awesome ฟ้อนต์ไอคอนฟรี ความสามารถระดับเทพ

ใครเคยใช้ Twitter Bootstrap น่าจะเคยได้ยินมาบ้างครับ เพราะฟ้อนต์ไอคอนชุดนี้อยู่คู่ Bootstrap มาตั้งแต่เวอร์ชั่น 2.x แล้วครับ อย่างไรก็ตาม เราไม่จำเป็นต้องใช้ Bootstrap ก็สามารถใช้ Font Icon ชุดนี้ได้อย่างไม่มีปัญหาครับผม

Font Icon ชุดนี้มีทั้งหมด 300+ ไอคอนให้เลือกใช้ และยังเพิ่มขึ้นเรื่อย ๆ ในอนาคตอีกด้วย ใช้ไอคอนชุดเดียวตอบโจทย์ได้เกือบหมดแน่นอนครับ ส่วนถ้าใครกลัวว่าจะมีปัญหากับ Internet Explorer หรือเปล่า ตัวนี้ซัพพอร์ทตั้งแต่ IE7 ขึ้นไป ใช้ได้สบายใจหายห่วงครับ (ท่านใดมีปัญหาสู้รบปรบมือกับการทำเว็บไซต์บน Internet Explorer เวอร์ชั่นเก่าบ่อย ๆ ลองอ่านบทความ เทคนิคการสู้รบกับ IE6/IE7 เลยครับ)

ส่วนหนึ่งของ Font Awesome

ไอคอนส่วนหนึ่งของ Font Awesome

แวะไปดูไอคอนทั้งหมด + Download Font Awesome มาใช้กันได้เลยฟรี ๆ ที่ Font Awesome Website ครับ สำหรับวิธีใช้งาน มาดูกัันด้านล่างเลย

การใส่ Font Awesome ในเว็บไซต์

ถ้าแค่ต้องการเทสไอคอนเฉย ๆ แนะนำให้ไม่ต้องโหลดไฟล์ Font Awesome มาลงในเครื่องครับ เราสามารถใช้ไฟล์ที่โฮสต์อยู่บน CDN ซึ่งเป็นบริการโฮสต์ไฟล์ฟรี ข้อเสียคือใน Firefox ไอคอนจะไม่ขึ้นครับ เพราะ Firefox จะป้องกันการดึงฟ้อนต์จาก URL เว็บอื่นมาใช้ ให้เทสใน Chrome ก่อน ถ้าจะเอามาใช้จริงจังค่อยโหลดมาใส่โฟลเดอร์โปรเจคเราครับ

การใส่ Font Awesome จาก CDN ลงในเว็บเรา (ไม่ต้องดาวน์โหลดไฟล์) ให้ใส่โค้ดนี้ใน <head> ของไฟล์ HTML ครับ:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />

ถ้าเราไม่ได้ใช้ Twitter Bootstrap ก็เอาบรรทัดแรกออกครับ ใส่แค่บรรทัดที่สองพอ

สังเกตุว่าในโค้ดด้านบน ลิงค์ไฟล์จะเริ่มด้วย // ครับ ไม่มี http: หรืออะไรตามหน้า เนื่องจากว่าเว็บในปัจจุบันมีทั้ง http: และ https: ถ้าเว็บเราเป็นแบบไหน มันก็จะแสดงไฟล์ CSS จาก protocal นั้น ๆ ขึ้นมาให้ครับ (บางคนอาจจะงง ให้คิดไปเลยว่าถ้าเว็บเราอยู่บนโฮสต์ หรือเปิดผ่าน localhost จะไม่มีปัญหาอะไร แต่ถ้าเปิดไฟล์โดยตรงจากการดับเบิ้ลคลิกในเครื่อง จะต้องใส่ http: ไปข้างหน้า // ด้วย)

การใส่ Font Awesome แบบโหลดไฟล์ลงเค่รื่อง:

ดาวน์โหลดไฟล์มาใส่ในโฟลเดอร์เว็บไซต์ของเราก่อนครับ จากนั้นใส่ HTML ใน <head> ตามนี้

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

โดยในส่วนของ path/to/font-awesome/css/font-awesome.min.css ให้แก้เป็น path ไปโฟลเดอร์ที่เราใส่ Font Awesome ไว้

วิธีการใช้ Font Awesome

เราสามารถดูไอคอนทั้งหมดที่อยู่ใน Font Awesome ได้ที่นี่ครับ หน้ารวม Icon ของ Font Awesome ให้เลือกไอคอนที่อยากใช้มา 1 ตัว สมมติว่าผมอยากใช้ไอคอนด้านล่างนี้นะครับ

font awesome icon test

จะให้เห็นว่าด้านข้างรูปไอคอนเขียนว่า fa-dashboard มันคือชื่อ class ที่เราต้องใส่ตอนเรียกใช้ครับผม ถ้าผมจะแสดงไอคอนนี้ตรงไหนก็เขียนโค้ดเลยว่า

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

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

นอกจากนั้นเราสามารถใส่ไอคอนขนาดใหญ่กว่าปกติก็ได้ ด้วยการเพิ่มคลาส fa-lg, fa-2x, fa-3x, fa-4x, fa-5x เข้่าไป (ไล่จากใหญ่น้อย ไปถึงใหญ่มาก) จะได้โค้ดออกมาแบบนี้ครับ

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

และเรายังสามารถใส่เอฟเฟ็กต์แปลก ๆ ให้กับ Font Icon ของเราได้มากมาย ผมเอามารวบรวมเขียนใน Codepen ให้แล้วครับ ดูได้ที่ด้านล่างเลย ถ้าอยากดูโค้ดก็กดแท็บ HTML ดูได้เลยครับ


ใช้แล้วเป็นยังไง หรือติดปัญหาอะไรสามารถทิ้งคอมเม้นท์ไว้ได้เลยครับ หรือแวะมาทักทายพูดคุยกันที่ Designil Facebook Page ได้ครับ มีเรื่องราวเกี่ยวกับ Web Design, การทำเว็บไซต์ที่มีประโยชน์อัพเดทตลอด 24 ชม. ครับผม







There are no comments

Add yours