วิธีเพิ่มไอคอน Font Awesome ให้กับ WordPress

หากคุณต้องการเพิ่มความโดดเด่นให้กับไซต์ WordPress ของคุณ การเพิ่มไอคอน Font Awesome เป็นวิธีที่ยอดเยี่ยม และโชคดีที่มันไม่ยากมากที่จะทำ ในบทความนี้ เราจะแสดงวิธีการเพิ่ม Font Awesome ให้กับ WordPress ทีละขั้นตอน Font Awesome เป็นไลบรารีไอคอนยอดนิยมที่มีไอคอนมากกว่า 600 ไอคอน คุณสามารถใช้ไอคอนเหล่านี้บนเว็บไซต์ของคุณโดยเพิ่มโค้ดสองสามบรรทัดในธีม WordPress ของคุณ ต่อไปนี้คือวิธีการเพิ่ม Font Awesome ใน WordPress: 1. ค้นหาโค้ดสำหรับไอคอนของคุณ คุณสามารถค้นหารหัสสำหรับไอคอน Font Awesome แต่ละไอคอนได้ในไลบรารีไอคอนของเว็บไซต์ 2. คัดลอกรหัส เมื่อคุณพบรหัสสำหรับไอคอนของคุณแล้ว ให้คัดลอกไปยังคลิปบอร์ดของคุณ 3. วางโค้ดลงในธีม WordPress ของคุณ เปิดธีม WordPress ของคุณในโปรแกรมแก้ไขข้อความแล้ววางโค้ดลงในตำแหน่งที่เหมาะสม 4. บันทึกการเปลี่ยนแปลงของคุณ บันทึกการเปลี่ยนแปลงของคุณและอัปโหลดธีมที่อัปเดตไปยังไซต์ WordPress ของคุณ นั่นคือทั้งหมดที่มีให้! การเพิ่มไอคอน Font Awesome ลงในไซต์ WordPress ของคุณเป็นวิธีที่ยอดเยี่ยมในการเพิ่มความน่าสนใจให้กับภาพ

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

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

ในการแก้ไขปัญหานี้ ก่อนอื่นให้ไปที่แดชบอร์ดผู้ดูแลระบบของคุณและค้นหาการเปลี่ยนแปลงในปลั๊กอิน Elementor ตัวเลือก "องค์ประกอบ" สามารถพบได้ในเมนู "องค์ประกอบ" “การตั้งค่า” จะปรากฏขึ้น จากนั้นคุณจะเห็นแท็บ “ขั้นสูง” หากต้องการเปิดใช้งานตัวเลือก " โหลดฟอนต์ Awesome 4 Support" ให้ไปที่หน้า "โหลดฟอนต์ Awesome 4 Support"

CSS Prefix fa และชื่อไอคอนสามารถใช้เพื่อวางไอคอน Font Awesome ได้ทุกที่ แม้ว่าองค์ประกอบแบบอินไลน์จะใช้กับ Font Awesome แต่เราชอบใช้แท็ก span> (เราชอบแท็ก *i]] สำหรับการพูดสั้นๆ แต่พูดตามความหมายโดยใช้ span%27s% หากคุณเปลี่ยนขนาดแบบอักษรของ คอนเทนเนอร์ของไอคอน คุณจะสังเกตเห็นว่ามีขนาดโตขึ้น

คุณสามารถดาวน์โหลดไอคอน Font Awesome 5 ฟรีได้จากไลบรารี Font Awesome หรือคุณสามารถสมัครใช้งานบัญชีและรับรหัส (เรียกว่า KIT CODE) เมื่อคุณเพิ่ม Font Awesome ลงในหน้าเว็บของคุณ

ในกรณีส่วนใหญ่ คุณสามารถใช้แบบอักษรนี้ในโปรเจ็กต์ของคุณเองได้โดยการลากปลั๊กอิน $:/plugins/TheDiveO/Fontawesome จากวิกินี้ไปยังโปรเจ็กต์ GitHub ของคุณเอง แบบอักษรในระบบปฏิบัติการของคุณไม่จำเป็นต้องติดตั้ง

ฉันจะเพิ่มไอคอนแบบอักษรที่ยอดเยี่ยมลงในไซต์ WordPress ของฉันได้อย่างไร

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

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

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

Font Awesome เป็นปลั๊กอินหรือไม่?

ปลั๊กอิน Font Awesome มีปลั๊กอินอย่างเป็นทางการที่ช่วยให้คุณใช้ไอคอน Pro หรือ Free กับ Font Awesome ได้ ทำให้การใช้ไอคอนของเราเป็นเรื่องง่ายโดยใช้รุ่นล่าสุดหรือรุ่นล่าสุด เทคโนโลยีนี้เป็นทางเลือกของคุณ: Web Font หรือ SVG

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

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

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

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

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

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

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

การจัดคิวสไตล์ชีตใน WordPress

สามารถโหลดสไตล์ชีตภายนอกได้โดยใช้คุณสมบัติสไตล์ชีตภายนอกของ WordPress หากต้องการจัดคิวสไตล์ชีต ให้ใช้บรรทัดต่อไปนี้ในไฟล์ functions.php ของธีมของคุณ: *br. ; (*br]) //sw_enqueue_script('awesome', 'https://www.googleapis.com/icon/awesome'); //sw_enqueue_script('awesome', 'https://www.googleapis.com/ พารามิเตอร์ที่สองคือ URL ของ font- awesome stylesheet คุณยังสามารถโหลดสไตล์ชีตโดยใช้ฟังก์ชันต่อไปนี้: WP_enqueue_style() เป็นอีกตัวเลือกหนึ่ง . WordPress_enqueue_style ('awesome', 'https://browser.googleapis.com/css/awesome'); *br พารามิเตอร์ตัวแรกและตัวที่สองคือชื่อและ URL ของสไตล์ชีต

เพิ่มไอคอน Font Awesome ในเมนู WordPress

การเพิ่มไอคอน Font Awesome ลงในเมนู WordPress เป็นวิธีที่ยอดเยี่ยมในการเพิ่มความพิเศษให้กับเว็บไซต์ของคุณ มีหลายวิธีในการทำเช่นนี้ แต่เราจะแนะนำวิธีที่ง่ายที่สุดให้คุณ
ขั้นแรก คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน Font Awesome Icons เมื่อคุณทำเสร็จแล้ว คุณจะต้องแก้ไขรายการเมนูที่คุณต้องการเพิ่มไอคอน ในช่อง "ป้ายการนำทาง" คุณจะต้องเพิ่มรหัสต่อไปนี้:
ชื่อรายการเมนู
แทนที่ "icon-name" ด้วยชื่อจริงของไอคอน Font Awesome ที่คุณต้องการใช้ ตัวอย่างเช่น หากคุณต้องการใช้ไอคอน "บ้าน" คุณจะใช้:
บ้าน
เมื่อคุณบันทึกการเปลี่ยนแปลงแล้ว คุณจะเห็นไอคอน Font Awesome ข้างรายการเมนูของคุณ!

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

Font Awesome Link

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

องค์ประกอบแบบอินไลน์สามารถใช้กับ Font Awesome ได้ แบบอักษรควรอยู่ในตำแหน่งที่เหมาะสม การเพิ่มคำนำหน้าชื่อไอคอนและการใช้คำนำหน้าชื่อไอคอนจะเพิ่มความสง่างามให้กับการออกแบบ หากไอคอนของคุณถูกสับที่ด้านบนและด้านล่าง ให้เพิ่มความสูงของบรรทัดให้ใหญ่ขึ้น การเพิ่มขึ้นของ fa-lg (ประมาณ 33%) ตามมาด้วย fa-2x (ประมาณ 33%), fa-3x (ประมาณ 33%) และ fa-4x (ประมาณ 33%) เนื่องจากความแตกต่างของขนาดคอนเทนเนอร์ระหว่างคลาส fa-4x และคลาส fa-5x ขนาดไอคอนของแต่ละคลาสจึงเพิ่มขึ้น ไอคอนจะหมุนและพลิกโดยใช้คลาส fa-rotate* และ fa-flip-*

สามารถใช้คลาสผกผันเป็นสีไอคอนทดแทนได้ ซ้อนหลายไอคอนโดยใช้คลาส fa-stack บนพาเรนต์ คุณยังสามารถเพิ่มคลาสไอคอนที่ใหญ่ขึ้นให้กับพาเรนต์เพื่อควบคุมขนาดของไอคอน

Font Awesome: แหล่งข้อมูลที่ยอดเยี่ยมสำหรับการสร้างไอคอน

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