หมวดหมู่: Design

Twemoji กับ Font AwesomeTwemoji กับ Font Awesome

ความแตกต่างระหว่าง Twemoji กับ Font Awesome คือเรื่องของ “จุดประสงค์การใช้งาน” และ “เทคโนโลยี” เบื้องหลังครับ เปรียบเทียบง่าย ๆ เหมือนเราเลือกระหว่าง “รูปภาพสีสำเร็จรูป” กับ “ไอคอนงานกราฟิก” ครับ


ตารางเปรียบเทียบ

หัวข้อTwemojiFont Awesome
ลักษณะเป็น Emoji เป็น UI Icons
สีสันFull Color Monochrome
ประเภทไฟล์รูปภาพ Web Font หรือ SVG
การควบคุมเปลี่ยนสีแยกส่วนไม่ได้ เปลี่ยนสี, ใส่เงา, ปรับขนาดเหมือนตัวอักษรได้อิสระ
มาตรฐานอิงตาม Unicode เป็น Library เฉพาะ

เจาะลึกความต่าง

  1. ความหมายและการสื่อสาร
    • Twemoji: ออกแบบมาเพื่อสื่อสาร อารมณ์ หรือแทน สิ่งของ จริง ๆ มักใช้ในเนื้อหาบทความ หรือช่องคอมเมนต์
    • Font Awesome: ออกแบบมาเพื่อเป็น สัญลักษณ์ในเมนู หรือปุ่มคำสั่งต่าง ๆ เพื่อให้ผู้ใช้งานเข้าใจฟังก์ชันของเว็บไซต์ได้ทันที
  2. ความยืดหยุ่นในการปรับแต่ง
    • Font Awesome: ชนะขาดเรื่องการตกแต่ง คุณสามารถสั่งให้ไอคอน “หมุน” , เปลี่ยนเป็นสีแดงเมื่อเอาเมาส์ชี้ , หรือปรับขนาดให้พอดีกับข้อความข้าง ๆ ได้ง่ายมาก
    • Twemoji: เน้นความสวยงามที่เป็นเอกลักษณ์ของ Twitter ถ้าคุณอยากได้รูปสมองที่มีสีชมพู / แดงแบบสมจริง Twemoji คือคำตอบ แต่คุณเปลี่ยนสีมันด้วย CSS color: blue; ไม่ได้
  3. การติดตั้ง
    • Twemoji: ถ้าคุณพิมพ์ Emoji ลงไปตรง ๆ เบราว์เซอร์จะแสดงผลตาม OS แต่ถ้าอยากให้เป็น Twemoji ทุกเครื่อง คุณต้องใช้ JavaScript ของเขามาคอย “เปลี่ยน” ตัวอักษรให้เป็นรูปภาพครับ
    • Font Awesome: ต้องโหลดไฟล์ CSS / Fonts ของเขามาใส่ในโปรเจกต์ก่อน ถึงจะเรียกใช้งานผ่าน Class เช่น <i class="fas fa-brain"></i> ได้

สรุปสั้น ๆ ถ้าอยากได้ภาพประกอบที่มีสีสันดูเป็นกันเอง ให้ใช้ Twemoji แต่ถ้าอยากได้ไอคอนสำหรับทำเมนูหรือปุ่มที่ปรับแต่งได้เยอะ ๆ ให้ใช้ Font Awesome ครับ


อ่านเพิ่มเติม