วิธีเพิ่มไอคอน Font Awesome บน WordPress – คู่มือฉบับสมบูรณ์

นั่นคือสิ่งที่คู่มือนี้เป็นข้อมูลเกี่ยวกับ เมื่อคุณอ่านจบ คุณจะรู้วิธี:

• เพิ่มสไตล์ชีต Font Awesome ด้วยตนเองใน WordPress
• เพิ่ม Font Awesome ให้กับ WordPress ด้วยปลั๊กอินฟรี
• แทรกและจัดรูปแบบไอคอน Font Awesome ได้หลากหลายวิธี

มาขุดกัน…

ทำไมคุณควรใช้เวลาในการเพิ่มไอคอน Font Awesome บน WordPress

ไอคอน Font Awesome นั้นยอดเยี่ยมเพราะเป็นชื่อที่แนะนำ มันเป็นแบบอักษรของไอคอนแทนที่จะเป็นรูปภาพ นั่นหมายความว่าคุณสามารถทำสิ่งดีๆ เช่น:

• ปรับขนาดโดยไม่สูญเสียคุณภาพเพราะไอคอนเป็นเวกเตอร์
• เปลี่ยนสี เพิ่มแอนิเมชั่น และใช้การปรับแต่ง CSS อื่นๆ

ทั้งหมดที่กล่าวมา ไอคอน Font Awesome นั้นเหนือกว่าการใช้ภาพนิ่งเพียงอย่างเดียว

ขั้นแรก ฉันจะแสดงให้คุณเห็นสองวิธีในการเพิ่มลงในไซต์ของคุณ จากนั้น ฉันจะแสดงให้คุณเห็นว่าคุณสามารถจัดรูปแบบและจัดการไอคอนของคุณได้อย่างไร (ไม่ว่าคุณจะเลือกวิธีใด)

วิธีเพิ่มไอคอน Font Awesome ด้วยตนเองบน WordPress

หากความคิดที่จะขุดลงไปในโค้ดของธีมของคุณทำให้คุณกลัว เราขอแนะนำให้คุณข้ามไปยังส่วนถัดไป ซึ่งฉันจะแสดงวิธีเพิ่มไอคอน Font Awesome ให้กับ WordPress โดยใช้ปลั๊กอินฟรี

มิฉะนั้น ฉันชอบวิธีนี้สำหรับวิธีที่ดีและมีน้ำหนักเบาในการทำให้ Font Awesome ทำงานได้

โดยพื้นฐานแล้ว สิ่งที่คุณต้องทำคือเพิ่มสไตล์ชีต Font Awesome ให้กับธีม WordPress ของคุณ จากนั้น คุณสามารถเริ่มแทรกไอคอน Font Awesome และจัดรูปแบบได้ตามต้องการ

นี่คือวิธีการทำงานของกระบวนการทั้งหมด ทีละขั้นตอน:

ขั้นตอนที่ 1: Enqueue Font Awesome Stylesheet ในธีม WordPress ของคุณ

อย่างที่ฉันบอกไป ขั้นตอนแรกของคุณคือการเพิ่มสไตล์ชีต Font Awesome CSS ให้กับธีม WordPress ของคุณ แม้ว่าคุณจะรับสิ่งนี้ได้โดยตรงจากเว็บไซต์ Font Awesome แต่วิธีที่ฉันชอบคือใช้เวอร์ชันที่โฮสต์บน Bootstrap CDN

ปัจจุบัน ลิงค์นั้นคือ:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

แต่จะเปลี่ยนไปเมื่อ Font Awesome ออกเวอร์ชันใหม่ ดังนั้นจึงควรอัปเดตลิงก์เป็นเวอร์ชันล่าสุดกึ่งเป็นประจำ (แม้ว่าเวอร์ชันเก่าจะยังใช้งานได้)

ในการเพิ่มสไตล์ชีตนี้ใน WordPress คุณต้องจัด คิว ในไฟล์ functions.php ของธีมลูกของ คุณ แม้ว่าวิธีการพื้นฐานของการเพิ่ม CSS คือการใส่ลิงก์ในส่วนหัวของคุณ แนวทางปฏิบัติที่ดีที่สุดคือการใช้ฟังก์ชันพิเศษของ WordPress enqueue แทนที่จะใส่สไตล์ชีตลงในส่วนหัวของคุณโดยตรง

นอกจากนี้ การใช้ธีมลูกจะช่วยให้แน่ใจว่าการเปลี่ยนแปลงของคุณจะไม่ถูกเขียนทับ หากคุณจำเป็นต้องอัปเกรดธีมของคุณ

เนื่องจากการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดของโค้ด WordPress เป็นสิ่งที่ดี เราขอแนะนำให้คุณใช้ทั้งธีมย่อยและฟังก์ชัน enqueue

ตกลง นี่คือวิธีการ:

ไปที่ Appearance → Editor และเลือกไฟล์ functions.php สำหรับธีมลูกของคุณ

จากนั้นวางโค้ดนี้:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

อย่าลืมบันทึกการเปลี่ยนแปลงของคุณ เท่านี้ก็เสร็จเรียบร้อย! ไม่เจ็บมากใช่ไหม?

ขั้นตอนที่ 2: แทรกไอคอน Font Awesome

เมื่อคุณจัดคิวสไตล์ชีตแล้ว คุณสามารถแทรกไอคอน Font Awesome ลงในไซต์ของคุณได้โดยไปที่การค้นหาไอคอน Font Awesome และค้นหาไอคอนที่คุณต้องการแทรก:

เมื่อคุณคลิกที่ไอคอน Font Awesome จะให้รหัสที่คุณต้องการใช้ไอคอน:

สิ่งที่คุณต้องทำคือวางโค้ดนั้นในแท็บ ข้อความ ของ WordPress Editor เพื่อเพิ่มไอคอนในเว็บไซต์ของคุณ

และนั่นแหล่ะ! คุณได้เพิ่มการรองรับ Font Awesome ให้กับ WordPress สำเร็จแล้ว ตอนนี้ เหลือเพียงเรียนรู้วิธีการจัดรูปแบบไอคอน Font Awesome บนไซต์ WordPress ของคุณ

แต่ก่อนที่จะแสดงให้คุณเห็น ฉันต้องการทบทวนวิธีปลั๊กอินเพื่อเพิ่ม Font Awesome Support อย่าลังเลที่จะข้ามไปข้างหน้าหากคุณใช้วิธีแบบแมนนวลแทนวิธีปลั๊กอิน

วิธีเพิ่มไอคอน Font Awesome บน WordPress ด้วยปลั๊กอิน

หากคุณต้องการใช้ปลั๊กอินแทนการจัดคิวสไตล์ชีต Font Awesome ด้วยตนเอง มีตัวเลือกฟรีที่ WordPress.org เรียกว่า Better Font Awesome

นอกจากการเพิ่มสไตล์ชีตล่าสุดลงในไซต์ของคุณแล้ว Better Font Awesome ยัง:

• ให้คุณใช้รหัสย่อเพื่อฝังไอคอน Font Awesome
• ให้เมนูแบบเลื่อนลงในตัวแก้ไข TinyMCE เพื่อแทรกไอคอน

หากคุณวางแผนที่จะใช้ไอคอน Font Awesome เป็นประจำ เครื่องมือทั้งสองนี้อาจทำให้ชีวิตของคุณง่ายขึ้น แต่สำหรับการใช้งานไม่บ่อยนัก ฉันคิดว่าวิธีการแบบแมนนวลเป็นตัวเลือกที่ง่ายที่สุดเพราะเป็นวิธีที่เบาที่สุด

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน Plugin

ในการเพิ่ม Font Awesome สิ่งที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน ไม่มีอะไรอีกแล้วจริงๆ

แม้ว่าจะมีแผงการตั้งค่าพื้นฐานที่คุณสามารถเข้าถึงได้โดยไปที่ Settings → Better Font Awesome คุณจะสามารถปล่อยให้ทุกอย่างเป็นค่าเริ่มต้นได้อย่างอิสระ

ขั้นตอนที่ 2: แทรกไอคอน Font Awesome

ในการแทรกไอคอน Font Awesome ด้วยปลั๊กอิน คุณมีสองตัวเลือกที่แตกต่างกัน:

• ใช้รหัสจากเว็บไซต์ของ Font Awesome เหมือนที่ฉันแสดงให้เห็นในส่วนก่อนหน้า
• ใช้รหัสย่อซึ่งสามารถสร้างได้จากเมนูแบบเลื่อนลง

เนื่องจากฉันได้แสดงให้คุณเห็นวิธีแรกในส่วนก่อนหน้านี้แล้ว ฉันจะให้คุณดูเครื่องกำเนิดรหัสย่อแบบเลื่อนลงอย่างรวดเร็ว

เมื่อคุณไปสร้างโพสต์หรือหน้าใหม่ คุณจะสังเกตเห็นปุ่ม แทรกไอคอน ใหม่ถัดจากปุ่ม เพิ่มสื่อ หากคุณคลิกที่ไอคอน คุณจะเห็นไอคอน Font Awesome ทั้งหมดที่มี รวมถึงตัวเลือกในการกรองผลลัพธ์:

สิ่งที่คุณต้องทำคือคลิกที่ไอคอนที่คุณเลือก จากนั้นปลั๊กอินจะแทรกรหัสย่อที่เหมาะสม:

และนั่นคือทั้งหมดที่มี!

เมื่อคุณได้รับการสนับสนุนไอคอน Font Awesome แล้ว มาดูวิธีที่คุณสามารถจัดรูปแบบและจัดการไอคอน Font Awesome ได้

วิธีจัดรูปแบบไอคอนแบบอักษรที่ยอดเยี่ยมและเปลี่ยนขนาด

ไม่ว่าคุณจะใช้วิธีใดในการเพิ่ม Font Awesome ให้กับ WordPress คุณจะใช้หลักการพื้นฐานเดียวกันนี้ในการจัดรูปแบบไอคอนของคุณ

นอกจากนี้ คำสั่งเหล่านี้ใช้งานได้ไม่ว่าคุณจะใช้รหัสย่อหรือโค้ดฝังตัวจากไซต์ของ Font Awesome

เคล็ดลับเหล่านี้ส่วนใหญ่ดึงมาจากหน้าตัวอย่าง Font Awesome โดยตรง ดังนั้นคุณจึงไม่ต้องกังวลเรื่องความเข้ากันได้

เปลี่ยนขนาดของไอคอน Font Awesome

มาเริ่มกันที่ไอคอนพื้นฐานกันก่อน - เพิ่มขนาดไอคอน Font Awesome ของคุณ ตามค่าเริ่มต้น ไอคอนต่างๆ จะค่อนข้างเล็ก ดังนั้นนี่คือสถานการณ์ที่คุณน่าจะเผชิญอย่างแน่นอน

ในการเพิ่มขนาดของไอคอน คุณสามารถใช้ตัวแก้ไขอย่างใดอย่างหนึ่งต่อไปนี้:

• fa-lg – เพิ่มขนาดขึ้น 33%
• fa-2x – ขนาดสองเท่า
• fa-3x – ขนาดสามเท่า
• fa-4x – …
• fa-5x – …

ในการใช้ตัวปรับแต่งเหล่านั้น คุณเพียงแค่เพิ่มมัน ต่อ จากชื่อของไอคอน (แต่อยู่ภายในเครื่องหมายคำพูด) สำหรับโค้ด และในใบเสนอราคาของชั้นเรียนสำหรับรหัสย่อ ต่อไปนี้คือตัวอย่างการเพิ่มขนาดของไอคอนเป็นสามเท่าสำหรับวิธีการฝังทั้งสองวิธี:

• <i class=”fa fa-ดาวน์โหลด fa-3x ” aria-hidden=”true”></i>
• [ชื่อไอคอน=”ดาวน์โหลด” class=” fa-3x “]

ตัวอย่างเช่นสิ่งนี้:

กลายเป็นสิ่งนี้ที่ส่วนหน้า:

หมุนไอคอนแบบอักษรสุดเจ๋ง

คุณยังสามารถหมุนไอคอน Font Awesome ได้อย่างง่ายดายเพื่อเปลี่ยนการวางแนว

นี่คือตัวดัดแปลงสำหรับการหมุน คุณสามารถใช้สิ่งเหล่านี้ได้เหมือนกับตัวแก้ไขขนาดด้านบน:

• fa-rotate-90 – หมุน 90 องศา
• fa-rotate-180 – หมุน 180 องศา
• fa-rotate-270 – หมุน 270 องศา
• fa-flip-horizontal – พลิกไอคอนตามแกนนอน
• fa-flip-vertical – พลิกไอคอนตามแกนแนวตั้ง

เพิ่มแอนิเมชั่นให้กับไอคอน Font Awesome

คุณยังสามารถเพิ่มแอนิเมชั่นพื้นฐานให้กับไอคอนของคุณได้ Font Awesome ให้ตัวปรับแต่งที่แตกต่างกันสองแบบเพื่อเพิ่มการหมุน:

• Fa-spin – เพิ่มการหมุนที่ราบรื่น
• fa-pulse – ทำให้ไอคอนหมุนใน 8 ขั้นตอนที่แตกต่างกัน

แอนิเมชั่นเหล่านี้เข้ากันได้ดีที่สุดกับไอคอนวงกลม หากคุณใช้ไอคอนที่มีรูปร่างแปลกตา เอฟเฟกต์อาจดูแปลกไปเล็กน้อย

เปลี่ยนฟอนต์ไอคอนสุดเจ๋ง

สุดท้ายนี้ ฉันจะแสดงวิธีเปลี่ยนสีของไอคอน Font Awesome ขออภัย ไม่มีตัวแก้ไขในตัวสำหรับสิ่งนี้ คุณจะต้องใช้ CSS ที่กำหนดเองแทน

ไม่ต้องกังวล – มันง่ายมาก

สิ่งที่คุณต้องมีคือรหัสเล็ก ๆ นี้:

.fa-NAME {
color: COLOR;
}

โดยที่ fa-NAME คือชื่อจริงของไอคอนของคุณ และ COLOR คือสีที่คุณต้องการเปลี่ยน

หากต้องการใช้ไอคอน ดาวน์โหลด จากตัวอย่างก่อนหน้านี้ ให้เปลี่ยนเป็นสีแดงโดยทำดังนี้

คุณสามารถเพิ่ม CSS ที่กำหนดเองได้อย่างง่ายดายโดยไปที่ Appearance → Customizer → CSS เพิ่มเติม

ห่อของ

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

พึงระวัง ถ้าคุณใช้วิธีแมนนวล คุณจะต้องเข้าไปและอัปเดตลิงก์ไปยังสไตล์ชีตเป็นระยะเพื่อให้ทันกับเวอร์ชันล่าสุด