วิธีเพิ่มไอคอนแบบอักษร SVG ที่ยอดเยี่ยมให้กับธีม WordPress ของคุณ

หากคุณต้องการเพิ่ม pizzazz ให้กับธีม WordPress ของคุณ การเพิ่มไอคอน Font Awesome SVG เป็นวิธีที่ยอดเยี่ยม และไม่ยากอย่างที่คิด ในบทความนี้ เราจะแสดงวิธีเพิ่มไอคอน Font Awesome SVG ให้กับธีม WordPress ของคุณ ขั้นแรก คุณจะต้องค้นหาไอคอน Font Awesome SVG ที่คุณต้องการใช้ คุณจะพบไอคอนมากมายในเว็บไซต์ Font Awesome เมื่อคุณพบไอคอนที่ต้องการใช้แล้ว ให้ดาวน์โหลดลงในคอมพิวเตอร์ของคุณ ถัดไป คุณจะต้องอัปโหลดไอคอน Font Awesome SVG ไปยังธีม WordPress ของคุณ คุณสามารถทำได้โดยไปที่แท็บ "ลักษณะที่ปรากฏ" ในแดชบอร์ด WordPress และเลือก "ตัวแก้ไข" จากที่นั่น ให้ค้นหาไฟล์ "ฟังก์ชันของธีม" (ปกติเรียกว่า "functions.php") และอัปโหลดไอคอน Font Awesome SVG ไปยังไฟล์นั้น สุดท้าย คุณจะต้องเพิ่มโค้ดสองสามบรรทัดในธีม WordPress เพื่อแสดงไอคอน Font Awesome SVG ค้นหาไฟล์ “header.php” และเพิ่มบรรทัดของรหัสต่อไปนี้: เมื่อคุณเพิ่มบรรทัดของรหัสเหล่านั้นแล้ว ให้บันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ “header.php” ไปยังธีม WordPress ของคุณ แค่นั้นแหละ! ตอนนี้คุณควรเห็นไอคอน Font Awesome SVG ปรากฏในธีม WordPress ของคุณ

คู่มือสำหรับผู้เริ่มต้นใช้งานไอคอน Font Awesome สำหรับไซต์ WordPress (2021) ไลบรารีไอคอนและชุดเครื่องมือที่ได้รับความนิยมมากที่สุดบนอินเทอร์เน็ตคือไลบรารีฟอนต์และชุดเครื่องมือที่ยอดเยี่ยม คุณสามารถติดตั้ง Font Awesome บน WordPress ได้อย่างง่ายดายด้วยวิธีใดวิธีหนึ่งจากสองวิธี เมื่อทำตามขั้นตอนเหล่านี้ คุณจะสามารถรวม Font Awesome กับ WordPress ได้ หากคุณไม่ทราบวิธีจัดการไอคอน Font Awesome บนเว็บไซต์ของคุณ ทางที่ดีควรปล่อยไว้บนเซิร์ฟเวอร์ หากคุณโฮสต์ไอคอนด้วยตัวเอง คุณสามารถรวมได้เฉพาะไฟล์ที่จะใช้บนไซต์ WordPress ของคุณ ความสามารถในการปรับแต่งและเปลี่ยนรูปลักษณ์ของไอคอนคือสิ่งที่ทำให้ Font Awesome เป็นชุดไอคอน

ผู้ใช้ WordPress สามารถเข้าถึง Font Awesome ได้ด้วยวิธีมาตรฐานที่แสดงไว้ด้านล่าง แม้ว่าการปรับแต่งไอคอนจะเป็นเรื่องง่าย โดยเฉพาะอย่างยิ่งหากคุณไม่คุ้นเคยกับการเขียนโปรแกรม แต่จะยากกว่าถ้าคุณไม่ทำ Font Awesome ใช้งานได้ง่ายขึ้นด้วยปลั๊กอิน Block, Gutenberg Stackable ด้วย Stackable คุณสามารถเลือกจากการออกแบบที่สร้างไว้ล่วงหน้าระดับพรีเมียมที่เหมือนกันกับไอคอน Font Awesome หากคุณมีบัญชี Font Awesome Pro ไอคอนทั้งหมดในบล็อกไอคอนจะพร้อมให้คุณใช้งานทันที วางซ้อนกันได้จัดการขั้นตอนการลงทะเบียนสำหรับคุณ ดังนั้นคุณไม่จำเป็นต้องลงทะเบียนสำหรับบัญชีหรือสร้างรหัส Kit ไม่จำเป็นต้องรู้วิธีเขียนโค้ดเพื่อเปลี่ยนรูปลักษณ์ของไอคอน คุณสามารถรับสิ่งนี้ได้ฟรีหรือมีค่าธรรมเนียมด้วยแผน Pro

ฉันจะเพิ่มไอคอนแบบอักษรที่กำหนดเองที่ยอดเยี่ยมใน WordPress ได้อย่างไร

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

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

หลังจากนั้น คุณต้องใส่โค้ดนี้ลงในไฟล์ functions.php ของธีมลูกของคุณ (โปรดทราบว่าฉันหวังว่านี่จะเป็นธีมย่อย) คุณควรปล่อยให้ไอคอนของคุณเล็กลงเล็กน้อยโดยส่วนใหญ่ ในการทำให้ไอคอนของคุณใหญ่ขึ้น เพียงเพิ่มคลาสอย่างง่ายในคลาสไอคอน ตรวจสอบหน้าตัวอย่างของ Font Awesome เพื่อดูรายการการปรับแต่งทั้งหมดที่คุณสามารถทำได้ คุณยังสามารถเพิ่มไอคอน Font Awesome ให้กับรายการเมนู WordPress จริงได้โดยใช้ ปลั๊กอิน Font Awesome 4 Menus ด้วยตัวเลือกการจัดรูปแบบเดียวกันกับตัวเลือกอื่นๆ คุณสามารถเพิ่มขนาดของไอคอนหรือดีกว่าได้อย่างง่ายดาย ในตัวอย่างนี้ คุณจะต้องรวมคลาสนี้ในรหัสย่อ: เพื่อเพิ่มขนาดของไอคอน

ฉันจะเพิ่มไอคอนที่กำหนดเองในธีม WordPress ของฉันได้อย่างไร

ไปที่ Admin Dashboard และเลือกตัวเลือก Media ทางด้านซ้ายของเมนู เมื่อคุณเลือกทั้งหมดแล้ว ให้คลิกอัปโหลด หลังจากอัปโหลดแล้ว ให้คัดลอกและวาง URL ของแต่ละไอคอนลงในไฟล์ Notepad เพื่อให้คุณรู้ว่าคืออะไรและจำ URL เหล่านั้นได้

เพิ่ม Font Awesome ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

ด้วยการใช้ Font Awesome คุณสามารถเพิ่มไอคอนใน WordPress ได้โดยไม่ต้องเป็นผู้เชี่ยวชาญในการเขียนโปรแกรมหรือภาษาการออกแบบใดๆ ตัวอย่างเช่น ไอคอนฟอนต์ บางตัวถูกแทนที่ด้วยรูปภาพดั้งเดิมหรือสไปรท์ชีต ซึ่งตอบสนองและปรับแต่งได้อย่างเต็มที่ CMS นี้ซึ่งมีให้ดาวน์โหลดฟรี มีการติดตั้งที่ใช้งานอยู่กว่า 80,000 รายการและเข้ากันได้กับ WordPress เวอร์ชันล่าสุด ไอคอนในแบบอักษรของเราเหมือนกับในแอปอื่น ๆ ของเรา ดังนั้นจึงสามารถปรับแต่งได้เหมือนกับที่เป็นแบบวันต่อวัน สี การจัดตำแหน่ง ความสูง สไตล์ และอื่นๆ สามารถเปลี่ยนแปลงได้ เบราว์เซอร์ส่วนใหญ่จะรู้จักไอคอนแบบอักษร เว็บไซต์ของเราอาจไม่ใช้รูปภาพเนื่องจากมีไอคอนแบบอักษรมากมาย

รูปภาพดั้งเดิมจะถูกแทนที่ด้วยไอคอน Font Awesome ในการออกแบบส่วนใหญ่ แม้ว่าจะมีหลายวิธีในการทำให้ไอคอนดูดีขึ้น แต่ก็สามารถทำการเปลี่ยนแปลงง่ายๆ ได้ นอกจากการเปลี่ยนขนาด หมุน และสีของไอคอนแล้ว คุณยังสามารถเปลี่ยนความสว่างและการหมุนได้ สิ่งที่คุณต้องทำคือคัดลอกและวางโค้ดด้านล่างลงในโปรแกรมแก้ไข WordPress ของคุณ ฉันจะใช้ font ที่ยอดเยี่ยมใน elementor ได้อย่างไร คุณไม่จำเป็นต้องติดตั้งปลั๊กอินเพิ่มเติมหรือเปลี่ยนไฟล์หลักของธีมของคุณ เวอร์ชันพรีเมียมของ Elementor มีไอคอน Font Awesome อยู่แล้ว ปลั๊กอิน Better Font Awesome เป็นปลั๊กอินง่ายๆ สำหรับสร้างรหัสย่อด้วยไอคอน Font Awesome และ Font Awesome Shortcodes

Font Awesome Icons

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

รหัสเนื้อหา CSS ที่ใช้โดย Font ที่ยอดเยี่ยมสำหรับการเพิ่มไอคอนในหน้าคือ::before pseudo-element หากต้องการใช้ไอคอนแบบอักษรที่ยอดเยี่ยมในโค้ดเนื้อหา CSS ให้ทำตามขั้นตอนด้านล่าง คุณสมบัติที่กำหนดเอง CSS ต่อไปนี้กำหนดคุณสมบัติตระกูลแบบอักษรและน้ำหนักแบบอักษรของไอคอน เราถูกบังคับให้ใช้ตระกูลฟอนต์เพราะไอคอนไม่แสดง เมื่อคุณป้อนรหัสด้านบน คุณจะเห็นไอคอนตามที่แสดงในรูปแบบเริ่มต้น หากคุณต้องการเพิ่มสไตล์ที่กำหนดเองให้กับไอคอน คุณสามารถทำได้โดยเพิ่มคลาสทั่วไปเข้าไป โดยทั่วไป ไอคอนแบบอักษรที่ยอดเยี่ยมจะแสดงโดยใช้ชื่อคลาส css และคลาสสไตล์ไอคอน เป็นการยากที่จะเปลี่ยนชื่อคลาสไอคอนของโปรเจ็กต์ทั้งหมด ในกรณีนี้ คลาส CSS fontawesome จะแสดงไอคอนโดยใช้โค้ดเนื้อหา CSS แทนที่จะเป็นองค์ประกอบหลอก

Font Awesome WordPress

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

ไลบรารี Font Awesome นั้นใช้งานง่ายมากบนไซต์ WordPress ของคุณ เวลาในการโหลดหน้าเว็บของคุณจะลดลงเมื่อคุณทำตามขั้นตอนง่ายๆ เหล่านี้ คุณจะได้รับแบบอักษรจริงแทนที่จะเป็นไอคอนสำหรับไซต์ของคุณ เนื่องจากพวกมันเป็นตัวละครที่มีประเภทตัวละคร พวกมันจึงสามารถจัดสไตล์และจัดการในแบบที่คุณจินตนาการได้ หากคุณไม่สนใจที่จะใส่โค้ดลงในธีมหรือไฟล์ของคุณ ปลั๊กอิน WordPress นี้เป็นตัวเลือกที่ยอดเยี่ยม ในแผน Pro คุณจะได้รับ 1,500 ไอคอนฟรี ในขณะที่แผนฟรี คุณจะได้รับมากกว่า 5,000 รูปแบบ เพิ่ม class=fab fa-wordpress ในส่วนใด ๆ ของไซต์ของคุณเพื่อแสดงไอคอน

คุณสามารถไปที่แท็บ ลักษณะที่ปรากฏ – ตัวแก้ไข ในแดชบอร์ด WP ของคุณและดาวน์โหลด Font Awesome โดยค้นหา header.php ทั้งหมดที่คุณต้องรู้ เส้นทางของบรรทัด ตำแหน่งที่เขียนข้อความ และวิธีเขียนโค้ด คุณสามารถวางโค้ดเดียวกันจาก Font Awesome ก่อนใช้งาน แม้ว่าคุณจะต้องเจาะลึกเข้าไปในไฟล์หลักของธีมของคุณ แต่นี่เป็นวิธีที่รวดเร็วมากในการบันทึกโค้ด หลังจากติดตั้งและกำหนดค่า Font Awesome แล้ว ตรวจสอบให้แน่ใจว่าไอคอนปรากฏขึ้น ขึ้นอยู่กับคุณว่าคุณจะใส่สไตล์ในสไตล์ชีตของคุณหรือไม่ สีและขนาดเป็นสองสไตล์ที่ใช้กันมากที่สุด คุณสามารถใช้แอตทริบิวต์ thediv เพื่อให้ทำงานได้ภายในข้อจำกัดของคุณ ตราบใดที่ไอคอนอยู่ภายในขนาดที่กำหนดและไม่ได้ตั้งค่าสัมบูรณ์

การตั้งค่าปลั๊กอิน Font Awesome

ชุดไอคอน Font Awesome เป็นชุดไอคอนยอดนิยมที่สามารถใช้ได้ในเว็บไซต์และแอปพลิเคชันต่างๆ เรามีปลั๊กอินที่ช่วยให้คุณใช้ Font Awesome ในแบบที่คุณเห็นว่าเหมาะสมกับ WordPress หากต้องการใช้ปลั๊กอิน ให้ไปที่เมนูการตั้งค่าและเลือก Font Awesome Plugin Settings ซึ่งคุณสามารถเปลี่ยนการตั้งค่า CDN เพื่ออนุญาตให้ใช้ไอคอน Font Awesome Free เป็นแบบอักษรเว็บได้ คุณไม่จำเป็นต้องแก้ไขการกำหนดค่าเริ่มต้น หากคุณต้องการเพียงไอคอนฟรีพื้นฐานเท่านั้น

WordPress Font Awesome Icon ไม่แสดง

ในกรณีนี้ ไอคอน Font Awesome จะไม่ปรากฏขึ้น ส่วน Theme Options (Avada) ของ Theme Features ไม่มี Font Awesome subset จะต้องเลือกชุดย่อยอย่างน้อยหนึ่งชุดเพื่อให้สำเร็จ

วิธีแก้ไขฟอนต์ที่ดีที่สุดคืออะไร? ใน WordPress คุณจะไม่เห็นไอคอนที่ยอดเยี่ยม วิดีโอด้านบนซึ่งดาวน์โหลดโดยผู้คนจำนวนมาก ได้บรรเทาปัญหาบางอย่างที่พวกเขาประสบกับไอคอนแบบอักษรที่ยอดเยี่ยมบนเว็บไซต์ของพวกเขา ด้วยเหตุนี้ ฉันจึงตัดสินใจทำให้เพจนี้เป็นแหล่งข้อมูลฟรี ด้วยเหตุนี้ ฉันสามารถค้นหาและเพิ่มการแก้ไขแบบอักษรและวิธีแก้ปัญหาในระบบของฉันได้อย่างเป็นระบบมากขึ้น แม้ว่าไอคอน Font Awesome บางตัวจะไม่ปรากฏบนบล็อก WordPress ของฉัน แต่บางไอคอนก็ปรากฏขึ้น พบปัญหาหลังจากที่ฉันเปลี่ยนโฮสต์

ไม่น่าแปลกใจเลยที่ตอนนี้ Font Awesome มีปลั๊กอินชื่อ Font Awesome plugin ผู้ที่ใช้ CDN อาจสังเกตเห็นวิธีแก้ปัญหาด้านล่าง ฉันจะแก้ไขไอคอนที่หายไปใน Font Awesome ได้อย่างไร วิดีโอที่ด้านบนของหน้านี้แสดงให้คุณเห็นถึงขั้นตอนต่างๆ ในการพยายามแก้ไขปัญหานี้ ฉันพบการอ้างอิงถึง แบบอักษร Awesome Stylesheet บนอินเทอร์เน็ต ฉันย้ายออกจากรหัสคงที่เป็นครั้งที่สองในหน่วยความจำล่าสุด พื้นที่ปลั๊กอินของฉันมีผลลัพธ์ที่เกี่ยวข้องจำนวนหนึ่งเมื่อค้นหา 'ยอดเยี่ยม' ตามที่เห็นในวิดีโอ

ฉันเชื่อว่านี่หมายความว่าอย่างน้อยไอคอนที่หายไปบางส่วนเป็นผลมาจากการอ้างอิงสไตล์ชีตที่ล้าสมัย จะเกิดอะไรขึ้นหากฉันกดปุ่มเปิด/ปิดบนไอคอนที่ไอคอนยังไม่แสดง หากคุณกำลังมีปัญหากับแบบอักษร คุณสามารถค้นหาแบบอักษรที่ยอดเยี่ยมและเปลี่ยนการออกแบบหรือรูปแบบของไอคอนนั้นได้

การเพิ่มไอคอนในเว็บไซต์ของคุณ

หากคุณกำลังใช้ Font Awesome เวอร์ชันฟรี คุณจะต้องใช้ไอคอนอื่น การใช้ตัวเลือกไอคอนใน Font Awesome เวอร์ชันที่ต้องชำระเงิน คุณสามารถเพิ่มไอคอนลงในเว็บไซต์ของคุณได้ เมื่อคุณอยู่ในบล็อกข้อความ Gutenberg (หรือเหนือแถบรูปแบบในตัวแก้ไข WordPress Classic) ระบบจะนำคุณไปยังตัวเลือกเมนู Font Awesome Icon ในแถบรูปแบบเพิ่มเติม เมื่อใช้ตัวเลือกไอคอน คุณสามารถค้นหาไอคอน Font Awesome ได้โดยใช้ชื่อไอคอน หมวดหมู่ หรือคำสำคัญ ในการวางไอคอนบนเว็บไซต์ของคุณ คุณต้องใช้ CSS Prefix fa และชื่อไอคอนก่อน หากคุณต้องการใช้ไอคอนในหมวดไอคอน Font Awesome ให้ใช้รหัสต่อไปนี้: *br. ด้วยเหตุนี้ Font Awesome จึงสามารถใช้ได้ในรูปแบบต่อไปนี้: br. ขนาดแบบอักษรของคอนเทนเนอร์ยังสามารถเปลี่ยนแปลงได้โดยใช้คำนำหน้า fa หากขนาดคอนเทนเนอร์ของแบบอักษรของไอคอนเปลี่ยนไป ขนาดคอนเทนเนอร์จะใหญ่ขึ้น หากคุณมี Font Awesome เวอร์ชันที่ต้องชำระเงิน คุณสามารถใช้ Icon Chooser เพื่อเพิ่มไอคอนลงในเว็บไซต์ของคุณได้