หนึ่งในองค์ประกอบหลักที่สำคัญของเว็บไซต์ที่จะขาดไปเสียไม่ได้เลยคือ icon เหตุผลหลักก็เหมือนที่มีมีคนเคยกล่าวไว้ว่า “หนึ่งภาพมีค่ายิ่งกว่าร้อยคำพูด” icon ถึงแม้จะไม่ใช่รูปภาพเสียทีเดียว แต่ด้วยความที่เป็นสื่อกลางที่คนไม่ว่าจะชาติภาษาไหนก็เข้าใจได้ง่าย หลายท่านคงอาจเคยใช้งาน icon ไม่ว่าจะเป็นรูปภาพ gif, png svg vector หรือแม้แต่ icon font ที่เป็นที่นิยมอย่างมากในปัจจุบัน (หากสงสัยว่าแล้ว icon font คืออัลไล ลองอ่านบทความของ designil นี้ดูครับ อธิบายได้ดีทีเดียว สรุปสั้นๆ คือมันเป็นฟอนต์ฟอนต์หนึ่งนี่แหละครับ แต่แทนที่จะเก็บแบบตัวอักษรก็เก็บ icon ไว้แทน ถ้านึกไม่ออกก็นึกถึงฟอนต์ Wingdings ที่มี icon แบบนี้ : ( ÿ ครับ) เพราะทั้งสะดวก ใช้งานง่าย ที่สำคัญคือมีขนาดเล็กและสวยงามดี ไม่มีอาการแตกเมื่อขยายใหญ่เข้า
แล้วถ้ามี logo หรือรูป icon ที่อยากทำเป็น icon font เองล่ะจะทำอย่างไร?
IconMoon Apps คือคำตอบ
IconMoon คือหนึ่งในผู้พัฒนา icon font ทั้งแบบฟรีและแบบคิดค่าใช้งานที่ผมคิดว่าสวยใช้ได้เลยล่ะครับ
นอกจากจะมีแบบกึ่งสำเร็จรูป ฉีกซองต้มน้ำแล้วกินได้เลย เอ้ย! แตกไฟล์อัพโหลดแล้วใช้ได้เลยแล้ว ยังเปิดให้เราสร้าง icon font ได้เองจากไฟล์ vector ด้วย
ก่อนที่จะเริ่มทำฟอนต์เองนั้น สิ่งที่คุณต้องมีก็คือ SVG vector ที่จะเอาไปใส่ใน font ของเรา หากมีไฟล์ Ai หรือไฟล์ vector เช่น EPS อยู่แล้ว ก็สามารถ Save As… เป็น .svg ได้เลยครับ หรือถ้ามีแต่รูปแบบ Bitmap เช่น PNG, GIF ผมขอแนะนำ Vector Magic ซึ่งให้บริการแปลงไฟล์ภาพ Bitmap ให้เป็น Vector แบบฟรีๆ (แต่ถ้าอยากแปลงแบบละเอียดกว่านี้ก็มีขายเหมือนกันครับ) อย่างไรก็ตาม สิ่งที่ผมแนะนำในการใช้งาน Vector นี้ก็คือคุณควรจะทำให้ icon มีความเรียบให้มากที่สุดก่อนจะใช้งานนะครับ การใส่เงาหรือไล่สีบางอย่างอาจจะทำให้ program แปลงสับสนจนไม่ตรงใจคุณ วิธีที่ดีที่สุดคือทำให้มีแค่สีเดียว (แนะนำสีดำครับ ง่ายดี 😛 แต่ถึงจะเป็น Vector หลายสี เวลาทำฟอนต์ใน IconMoon จะแยกอักษรออกเป็นหลายๆ ตัวตามสีของสีนั้น ผลที่ได้คือ HTML Element ที่ต้องใช้จะเยอะตามจำนวนสีนั้นด้วย) แล้วส่วนไหนไม่ใช้ก็เจาะใสไว้ การทำเช่นนี้ก็เหมือนกับท่านเตรียมรูปแบบลงสีเต็มแล้วกับภาพเรียบๆ ให้เด็กๆ เอาไปลอกต่อ ภาพแบบหลังเด้กๆ จะลอกเอาไปได้เหมือนกว่าครับ ท่านจะเอามาลงสีใหม่ก็ย่อมได้สวยกว่า
เมื่อเตรียมพร้อมแล้ว ก็เข้าไปที่ https://icomoon.io/app ได้เลยครับ
หน้าเลือกฟอนต์และเพิ่ม/ลด icon
เมื่อโหลดหน้าเสร็จ IconMoon จะมี icon ฟรีของ IconMoon บางตัวเตรียมพร้อมให้คุณแล้ว จะเลือกใช้ก็เพียงแค่คลิกให้มัน highlight ไว้ก็เป็นอันใช้ได้ครับ ส่วน vector ที่จะเอามาทำฟอนต์ก็เพียงแต่โยนเข้าหน้าเว็บเลย หรือกด Import Icons เพื่อเลือกไฟล์ได้ครับ (หรือหากจะลักไก่เอาฟอนต์ชุดอื่น เช่น FontAwesome เข้าไปผสมก็ทำได้ครับ แต่ต้องเลือกไฟล์ svg เข้าไปนะครับ)
หน้าตั้งชื่อ project สามารถนำเข้า/ส่งออก project ได้
หรือหากมี project ที่เคยทำไว้หรืออยากจะส่งต่อให้คนอื่น ก็คลิกที่ชื่อ project เพื่อเลือกได้เช่นกันครับ
หน้า Generate font
เมื่ออัพโหลด vector icons จนพอใจแล้ว ก็กด Generate font ครับตรงนี้สามารถตั้งชื่อ icon หรือ copy HTML Code สำหรับไปใช้งานโดยกด <> Get Code ก็ได้เช่นกันครับ (การตั้งชื่อ icon นี้จะส่งผลกระทบต่อชื่อ class ด้วยนะครับ ฉะนั้นขอแนะนำให้ตั้งชื่อด้วยอักษรภาษาอังกฤษ และหากจะคั่นคำ อย่าคั่นด้วยเว้นวรรค เพราะจะทำให้ CSS Selector เพี้ยนได้ แต่สามารถใช้ underscore [ _ ] หรือ dash [ – ] ได้ตามปกติครับ)
หน้าปรับแต่ง font
หากไม่ได้ตั้งค่าไว้เป็นพิเศษ ชื่อฟอนต์ที่ได้จะเป็น iconmoon นะครับ หากอยากปรับแต่งอะไรเพิ่มเติมก็คลิกเครื่องหมายฟันเฟืองเพื่อปรับชื่อ การ support ได้ครับ เช่นอยากให้รองรับ IE เก่าๆ ให้ทำ SCSS ด้วย เป็นต้น
ปรับแต่งจนพอใจแล้วก็กด Download เป็นอันเสร็จพิธี จะเอาไปต้มยำทำแกงในเว็บก็ทำเหมือน icon font ทั่วไปได้เลย (แถมมีไฟล์ demo.html ให้ลอก เอ้ย! ศึกษาการใช้งานด้วย) หรือหากจะเอาฟอนต์นี้ไปใช้งานอื่น เช่นจะเอาไปใช้ใน Word processing ก็ติดตั้ง font ลงระบบก็ใช้งานได้เช่นกันครับ
ท่านใดมีเทคนิคหรือข้อเสนอแนะเพิ่มเติมก็แนะนำกันเข้ามาได้ที่ comment ได้ตามปกติเลยครับ สวัสดีครับ