วิธีเพิ่มไอคอน Font Awesome ลงในเมนู WordPress ของคุณ

การเพิ่มไอคอน Font Awesome ลงในเมนู WordPress เป็นวิธีที่ยอดเยี่ยมในการเพิ่มความน่าสนใจให้กับไซต์ของคุณ มีหลายวิธีในการทำเช่นนี้ แต่เราจะเน้นสองวิธี: การใช้ปลั๊กอิน และเพิ่มโค้ดด้วยตนเอง หากคุณไม่ใช่นักพัฒนาหรือคุ้นเคยกับการใช้โค้ด การใช้ปลั๊กอินเป็นตัวเลือกที่ดีที่สุด เราขอแนะนำปลั๊กอิน Font Awesome Icons ซึ่งฟรีและใช้งานง่าย เพียงติดตั้งและเปิดใช้งานปลั๊กอิน จากนั้นไปที่ ลักษณะที่ปรากฏ > เมนู ในแดชบอร์ด WordPress ของคุณ จากที่นั่น คุณสามารถคลิกที่แท็บ "Font Awesome" เพื่อเลือกไอคอนที่คุณต้องการใช้ หากคุณพอใจกับโค้ด คุณสามารถเพิ่มไอคอน Font Awesome ลงในเมนูได้โดยเพิ่ม CSS สองสามบรรทัดในธีมของคุณ ขั้นแรก คุณจะต้องดาวน์โหลด Font Awesome icon font จากนั้นเปิดไฟล์ style.css ของธีมและวางโค้ดต่อไปนี้ที่ด้านล่าง: @font-face { font-family: 'FontAwesome'; src: url('fontawesome.eot'); src: url ('fontawesome.eot?#iefix') รูปแบบ ('embedded-opentype'), url ('fontawesome.woff2') รูปแบบ ('woff2'), url ('fontawesome.woff') รูปแบบ ('woff' ), url('fontawesome.ttf') รูปแบบ ('truetype'), url('fontawesome.svg#FontAwesome') รูปแบบ ('svg'); ตัวอักษร-น้ำหนัก: ปกติ; ตัวอักษรสไตล์: ปกติ; } แทนที่ “fontawesome.eot” ด้วยพาธไปยังไฟล์ฟอนต์ไอคอน Font Awesome ของคุณ จากนั้น เพิ่มรหัสต่อไปนี้ในรายการเมนูของคุณ: .fa-icon { font-family: 'FontAwesome'; ช่องว่างภายใน-ขวา: 0.5em; } อย่าลืมบันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณ ตอนนี้ไอคอน Font Awesome ของคุณจะปรากฏในเมนู WordPress ของคุณ!

ในบทความนี้ เราจะแนะนำวิธีการเพิ่มไอคอน Font Awesome ในเมนู WordPress เมื่อคุณเปิดใช้งานปลั๊กอินแล้ว คุณจะสามารถเข้าถึงไอคอนสำหรับโพสต์ของคุณจากเมนูใหม่ที่จะปรากฏขึ้นเมื่อคุณคลิกที่ส่วนขยายที่เรียกว่า 'Font Awesome Icon' การเพิ่มไอคอนแบบอักษรผ่านรหัสย่อหรือตัวอย่าง HTML จะง่ายยิ่งขึ้นด้วยปลั๊กอินเวอร์ชันล่าสุด ไอคอนสามารถรวมคลาส CSS ในรหัสย่อหลัง WordPress 4.0 ได้แล้ว ด้วยเหตุนี้ คุณสามารถเพิ่มไอคอน Font Awesome ที่สวยงามลงในโค้ดของคุณได้ด้วยคลาส CSS สองสามคลาส เช่น Sizing, Rotating และ Animating เนื่องจาก แบบอักษรของไอคอน IcoMoon จึงประกอบด้วยตัวอักษรจำนวนมากในสไตล์ต่างๆ โดยแต่ละตัวอักษรมีไอคอนต่างกัน การใช้ไอคอน Font Awesome ในเมนู WordPress ของคุณเป็นขั้นตอนง่ายๆ ที่ใช้เวลาเพียงไม่กี่นาที คุณจะต้องทำงานหนักขึ้นในวิธีที่สอง แต่คุณจะสามารถควบคุมรูปลักษณ์ของเมนูได้ นี่เป็นวิธีที่ยอดเยี่ยมในการแสดงให้ผู้เยี่ยมชมเห็นว่าคุณกำลังติดตามเทรนด์แฟชั่นล่าสุด

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

ฉันจะเพิ่มไอคอนลงในเมนูใน WordPress ได้อย่างไร

เลือกรายการเมนูที่คุณสร้างไว้แล้วเพื่อเพิ่มไอคอนเมนู WordPress เมื่อคลิกที่ไอคอน คุณจะสามารถเข้าถึงเนื้อหาได้ ลิงค์จะถูกเลือก หากต้องการเพิ่มไอคอนรายการเมนู ให้คลิกที่ไอคอนและไปยังส่วนที่คุณต้องการให้ปรากฏ ในกรณีของปลั๊กอิน Menu Icons ซึ่งสร้างขึ้นบน Themeisle จะมีตัวเลือกไอคอนจากคอลเล็กชัน Dashicons

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

วิธีเพิ่มไอคอนในเมนู WordPress ของคุณ

การเพิ่มไอคอนในเมนู WordPress นั้นทำได้ยาก แต่ด้วยความรู้เล็กน้อยและปลั๊กอินสองสามอย่าง คุณไม่ต้องกังวลกับมัน เริ่มต้นด้วยการเลือกลักษณะที่ปรากฏจากแถบเมนู คุณจะสามารถเห็นรายการเมนูของคุณได้ทันทีที่คุณเปิดมัน เมื่อคุณขยายรายการเมนูที่คุณต้องการเพิ่มไอคอนโดยการคลิกลูกศรลง บางฟิลด์จะปรากฏขึ้น ในช่องป้ายการนำทาง เราสามารถเพิ่มไอคอน HTML ของเราได้ ขั้นตอนต่อไปคือการค้นหาไอคอนที่เราต้องการใช้ มีหลายทางเลือกสำหรับเรา เราสามารถค้นหาไอคอนออนไลน์ หรือดาวน์โหลดและติดตั้งปลั๊กอิน เช่น ไอคอนโดย IconFinder ซึ่งจะช่วยให้เราอัปโหลดและจัดการไอคอนของเราเองได้ เมื่อเราสร้างไอคอนแล้ว เราจะต้องหาวิธีรวมไอคอนเหล่านี้ในเมนู WordPress ของเรา ซึ่งสามารถทำได้โดยการอัปโหลดไอคอนไปยังเว็บไซต์ WordPress ของเรา หรือโดยการคัดลอก URL ของไอคอนลงในไฟล์ Notepad และใช้เมนู WordPress จำเป็นต้องหาวิธีอัปโหลดไอคอนไปยังเว็บไซต์ของเราหากเราต้องการทำเช่นนั้น โดยการพิมพ์ URL ของไอคอนลงในไฟล์ Notepad และอ้างอิงจากเมนู WordPress ของเรา เราสามารถอัปโหลดไอคอนไปยังเว็บไซต์ WordPress ของเราหรือเพียงแค่เชื่อมโยงได้ เราต้องหาวิธีบันทึกไฟล์ Notepad เพื่อวาง URL ของไอคอนลงในไฟล์ Notepad จากนั้นอ้างอิงในเมนู WordPress ของเรา เพื่อให้บรรลุสิ่งนี้ เราสามารถใช้ปลั๊กอิน เช่น ไอคอนโดย IconFinder หรือบันทึกไฟล์แผ่นจดบันทึกไปยังเว็บไซต์ WordPress ของเราโดยตรง ไอคอนที่กำหนดเองของเราจะปรากฏในเมนู WordPress ทันทีที่บันทึกและอ้างอิงในเมนู WordPress ของเรา

ฉันจะแก้ไขไอคอน Font Awesome ที่ไม่แสดงใน WordPress ได้อย่างไร

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

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

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

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

แบบอักษรฟรีหรือทางเลือกอื่นที่ยอดเยี่ยมจะไม่แสดงไอคอน Pro

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

ฉันจะเพิ่มไอคอนในเมนู WordPress โดยไม่ต้องใช้ปลั๊กอินได้อย่างไร

บนแดชบอร์ดผู้ดูแลระบบ ไปที่เมนูด้านซ้ายและเลือก ลักษณะที่ปรากฏ ในหน้าจอใหม่ ให้เลือกตัวเลือกหน้าจอที่มุมขวาบน จากนั้นทำเครื่องหมายที่ช่องถัดจาก "แสดงคลาส CSS ในรายการเมนู" สำหรับเมนูที่คุณต้องการเพิ่มไอคอนในเมนูแบบกำหนดเองของ WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

หากคุณต้องการใช้ปลั๊กอิน อย่าลืมค้นหาปลั๊กอินที่ถูกต้องสำหรับเวอร์ชัน WordPress ของคุณ

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

วิธีเพิ่มไอคอน Font Awesome ใน WordPress

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

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

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

การเปลี่ยนแบบอักษรควรทำเมื่อใดก็ได้ เป็นสีไอคอนที่ยอดเยี่ยม แต่ไม่มีตัวปรับแต่งใด ๆ ในตัวสำหรับมัน เพื่อให้บรรลุสิ่งนี้ จำเป็นต้องมี CSS ที่กำหนดเอง

วิธีเพิ่มไอคอนในเมนู WordPress ของคุณ

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

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

การเพิ่ม Font Awesome ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอินเป็นเรื่องง่าย สิ่งที่คุณต้องทำคือเพิ่มโค้ดสองสามบรรทัดลงในไฟล์ functions.php ของคุณ ขั้นแรก คุณต้องจัดคิว Font Awesome stylesheet คุณสามารถทำได้โดยเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของคุณ: function enqueue_font_awesome(){ wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font- น่ากลัว.css' ); } add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); ถัดไป คุณต้องเพิ่มคลาส Font Awesome ลงในเมนูของคุณ คุณสามารถทำได้โดยเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของคุณ: function font_awesome_menu_icons(){ $args = array( 'menu_class' => 'font-awesome-icons', 'container' => false, 'depth' = > 1 ); wp_nav_menu( $args ); } add_action( 'init', 'font_awesome_menu_icons' ); และนั่นแหล่ะ! คุณได้เพิ่ม Font Awesome ให้กับ WordPress ได้สำเร็จโดยไม่ต้องใช้ปลั๊กอิน

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

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

วิธีเพิ่มไอคอนใน WordPress

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

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

ฉันจะเพิ่มรูปภาพลงในไอคอน WordPress ของฉันได้อย่างไร

เพิ่มไอคอนไซต์ โดยคลิกที่ไอคอน คุณสามารถเลือกไอคอนไซต์ เมื่อคลิกแล้วคุณจะสามารถเข้าถึง Media Library ของคุณได้ เลือกภาพที่มีอยู่หรืออัปโหลดภาพใหม่

Enqueue Font Awesome WordPress

การจัดคิว Font Awesome ใน WordPress เป็นเรื่องง่าย คุณสามารถทำได้โดยเพิ่มโค้ดสองสามบรรทัดลงในไฟล์ functions.php ของคุณ หรือโดยใช้ปลั๊กอิน เช่น Better Font Awesome

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

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