1-15: แนะนำไอคอนฟอนต์ Font Awesome และ Seed Icons


 

ใน Wordpress จะมีปลั๊กอินตัวหนึ่งที่แถมมาให้อยู่แล้วเรียกว่า Font Awesome ปลั๊กอินตัวนี้ใช้สร้างไอคอนสวยๆและภาพไม่แตกอีกด้วยเพราะเป็นรูปแบบจะเป็นคล้ายๆ Font คือ เป็น Vector

การดึงมาใช้งาน จะต้องเขียนคำสั่งภาษา Html นิดหน่อย ตามภาพ

เราจะลองนำไอคอนมาใส่ไว้ตรงส่วนของเมนูหลัก ก็สามารถทำได้

ไปที่หัวข้อ ไอคอน ในเว็บหลักของ Font Awesome

ไปที่ Cheatsheet

ในนี้จะมีตัวอย่างและโค๊ดตัวอักษร เยอะมาก ลองหยิบมาซักอันหนึ่ง แป้นพิมพ์ของเรา กด Ctrl+F หรือ Command+F แล้วพิมพ์คำว่า home เราจะเจอคำที่คล้ายกัน 2-3 คำ เลือกรูปแบบที่เราต้องการ จากนั้น เก็บคีย์เวิร์ดของรูปแบบที่เราเลือกไว้

ไปที่หลังบ้าน > รูปแบบบล็อก > เมนู

ที่เมนูหน้าแรก เปลี่ยนข้อความป้ายชื่อเมนู ดังรูป จากนั้นคลิกที่ บันทึกเมนู

<i class="fa fa-home"></i> หน้าแรก

ไปที่หน้าบ้าน กด Refresh 1 ครั้งจะเห็นว่ามีไอคอนเกิดขึ้นที่เมนู หน้าแรก แล้ว

ลองเพิ่มอีกซักอัน ค้นหาคำว่า book

ไปที่หลังบ้าน ตรงเมนู บล็อก เปลี่ยนข้อความ ดังรูป

<i class="fa fa-book"></i> บล็อก

ที่หน้าบ้าน จะมีไอคอนที่เราเปลี่ยนตั้งค่าดังรูป

ใน SeedThemes จะมีไอคอนฟ้อนต์ให้ใช้เหมือนกัน ซึ่งรูปแบบการเขียนจะคล้ายๆกับของ Font Awesome

ลองเปลี่ยนป้ายชื่อเมนู เป็นแบบของ Seed icon Fonts ดังรูป

ไปที่หน้าบ้าน ไอคอนจะเปลี่ยนเป็นแบบของ Seed icon Fonts แล้ว

ไอคอนในธีม Seed ที่มี จะเป็นไอคอนที่ใช้กันบ่อยๆ สามารถเลือกใช้ได้ตามความต้องการ

และ SeedThemes จะมี icon อีกชุดหนึ่งเรียกว่า Seed Social แต่จะต้องติดตั้งปลั๊กอิน Seed Social ก่อน จึงจะสามารถใช้งานไอคอนเหล่านี้ได้

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments