เราจะลองใส่ Twemoji ในบทความดู 🔮 🧙♂️โดยมีแหล่งให้คุณเข้าไปดูตัวอย่างและเลือกใช้งานได้หลายที่เลยครับ ตอนที่เห็นครั้งแรก คิดว่าเป็นการ insert รูปมาจากข้างนอกเพราะเห็นเป็น <img draggable="false" role="img" class="emoji" alt="🧠" src="https://s.w.org/images/core/emoji/17.0.2/svg/1f9e0.svg"> เพิ่งมารู้ว่า มีอยู่ในระบบคอมพิวเตอร์และสมาร์ทโฟนแทบทุกเครื่องอยู่แล้ว เป็นระบบอิโมจิติดมาเลย
ส่วนสาเหตุที่ลิงก์ที่เห็นมันดูเหมือนมาจากเว็บไซต์ภายนอก ( s.w.org ) เป็นเพราะระบบการแสดงผลของบางแพลตฟอร์ม ( เช่น WordPress หรือเว็บเบราว์เซอร์บางตัว ) จะใช้วิธีดึงไฟล์ภาพ SVG มาแสดงแทนฟอนต์ปกติ เพื่อให้หน้าตาของ Emoji ดูเหมือนกันในทุกอุปกรณ์
แหล่งที่มา
หน้าเว็บสำหรับค้นหาและดูตัวอย่าง
ถ้าคุณต้องการหา Emoji เป็นรายตัว ดูหน้าตา หรือโหลดไฟล์ SVG / PNG มาใช้งาน แนะนำเว็บเหล่านี้ครับ
- Emojipedia ( Twemoji Section ): เป็นแหล่งที่ใช้ง่ายที่สุด คุณสามารถดูได้ว่า Emoji แต่ละตัวในสไตล์ Twemoji หน้าตาเป็นยังไง และกดคัดลอก ( Copy ) ไปใช้ได้ทันที
- EmojiTerra: หน้าเว็บนี้จะรวม Emoji ทั้งหมดแยกตามหมวดหมู่ พร้อมให้โหลดไฟล์ภาพได้ง่าย
แหล่งรวมไฟล์ต้นฉบับ ( GitHub )
หากคุณเป็นสาย Dev หรืออยากได้ไฟล์ทั้งหมดไปใช้งานในโปรเจกต์
- jdecked/twemoji GitHub: นี่คือ Repository หลักในปัจจุบัน คุณสามารถเข้าไปที่โฟลเดอร์
assetsเพื่อดูไฟล์ SVG หรือ 72×72 PNG ของ Emoji ทุกตัวได้เลยครับ
วิธีนำไปใช้
- Unicode Standard: โดยใช้รหัสมาตรฐานคือ
U+1F9E0🧠 ถูกเพิ่มเข้ามาตั้งแต่ปี 2017 - การใช้งาน:
- ถ้าคุณใช้ Windows สามารถกดปุ่ม
Windows+.( จุด ) - ถ้าใช้ Mac ให้กด
Command+Control+Spaceเพื่อเลือกใช้ได้เลยครับ
- ถ้าคุณใช้ Windows สามารถกดปุ่ม
- Open Source: ลิงก์ที่คุณแนบมามาจากโครงการของ Twemoji ( โดย Twitter / X ) ซึ่งเป็นชุด Emoji แบบ Open Source ที่คนนิยมเอาไปใช้ในเว็บไซต์เพื่อให้ภาพสวยงามและเป็นระเบียบครับ
ตารางเปรียบเทียบประเภทไฟล์
| ประเภทไฟล์ | ข้อดี | เหมาะสำหรับ |
| SVG | ย่อขยายแล้วภาพไม่แตก ( Vector ) | งานออกแบบ, เว็บไซต์คุณภาพสูง |
| PNG | ใช้งานง่าย, รองรับทุกโปรแกรม | การทำกราฟิกทั่วไป, ใส่ในเอกสาร |
อ่านเพิ่มเติม