วิธีใช้ไอคอน Font Awesome ใน WordPress

หากคุณต้องการใช้ ไอคอน Font Awesome ในไซต์ WordPress ของคุณ สิ่งแรกที่คุณต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน Font Awesome Icons สำหรับข้อมูลเพิ่มเติม โปรดดูบทความเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress เมื่อเปิดใช้งานปลั๊กอินแล้ว คุณต้องแก้ไขธีม WordPress เพื่อรวมไฟล์ Font Awesome CSS วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของธีมของคุณ: add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); ฟังก์ชัน enqueue_font_awesome () { wp_enqueue_style ( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', อาร์เรย์ (), '4.0.3' ); } โค้ดนี้จะโหลดไฟล์ Font Awesome CSS จาก Bootstrap CDN หากต้องการ คุณสามารถดาวน์โหลดไฟล์ Font Awesome CSS และโฮสต์บนเซิร์ฟเวอร์ของคุณเองได้ เมื่อโหลดไฟล์ Font Awesome CSS แล้ว คุณสามารถเริ่มใช้ไอคอนต่างๆ ในไซต์ WordPress ของคุณได้ ตัวอย่างเช่น คุณสามารถเพิ่มไอคอนลงในเมนูได้ดังนี้: หน้าแรก ติดต่อ คุณยังสามารถใช้ไอคอน Font Awesome ในเนื้อหาของคุณได้ ตัวอย่างเช่น คุณสามารถเพิ่มไอคอนลงในรายการดังนี้: นี่คือรายการที่หนึ่ง นี่คือรายการที่สอง นี่คือรายการที่สาม และคุณสามารถเพิ่มไอคอนไปยังลิงก์เช่นนี้ ติดตามฉันบน Twitter ความเป็นไปได้ไม่มีที่สิ้นสุด! สำหรับข้อมูลเพิ่มเติม โปรดดูที่เว็บไซต์ Font Awesome

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

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

ตัวเลือกเมนู Font Awesome Icon สามารถพบได้ในแถบรูปแบบเพิ่มเติมเมื่อคุณอยู่ในบล็อกข้อความ Gutenberg (หรือเหนือแถบรูปแบบในตัวแก้ไข WordPress Classic) ตัวเลือกไอคอนช่วยให้คุณค้นหาไอคอน Font Awesome ตามชื่อไอคอน หมวดหมู่ หรือคีย์เวิร์ดได้

ฉันจะใช้ Font Awesome ในธีม WordPress ได้อย่างไร

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

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

ฉันสามารถใช้ Font Awesome ในเชิงพาณิชย์ได้หรือไม่

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

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

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

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

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

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

Font Awesome: ปลั๊กอิน WordPress ที่ต้องมีสำหรับเว็บไซต์ของคุณ

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

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

การเพิ่ม Font Awesome ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอินนั้นเป็นกระบวนการที่ค่อนข้างง่าย ขั้นแรก คุณจะต้องไปที่เว็บไซต์ Font Awesome และดาวน์โหลดไลบรารี Font Awesome เวอร์ชันล่าสุด ถัดไป คุณจะต้องอัปโหลดไลบรารี Font Awesome ไปยังไซต์ WordPress ของคุณ วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ไคลเอนต์ FTP เมื่อไลบรารี Font Awesome ถูกอัปโหลดไปยังไซต์ WordPress คุณจะต้องเพิ่มโค้ดสองสามบรรทัดลงในไฟล์ functions.php ของธีม WordPress ของคุณ รหัสที่คุณต้องเพิ่มคือ:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
ฟังก์ชั่น enqueue_font_awesome () {
wp_enqueue_style( 'แบบอักษรที่ยอดเยี่ยม', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', อาร์เรย์ (), '4.0.3' );
}
การเพิ่ม Font Awesome ให้กับ WordPress โดยไม่ต้องใช้ปลั๊กอินนั้นเป็นกระบวนการที่ค่อนข้างง่าย รหัสที่คุณต้องเพิ่มคือ:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
ฟังก์ชั่น enqueue_font_awesome () {
wp_enqueue_style( 'แบบอักษรที่ยอดเยี่ยม', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', อาร์เรย์ (), '4.0.3' );
}

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

วิธีใช้ไอคอน Font Awesome ใน WordPress

เพียงเลือกไอคอน Font Awesome จากเมนู WordPress การเพิ่มไอคอนในหน้าใดก็ได้โดยการเพิ่ม *i class=fab fa-wordpress*/i ตรวจสอบไลบรารีไอคอนเพื่อดูคำแนะนำว่าจะรวมอะไรไว้บ้าง เป็นสิ่งสำคัญที่จะต้องทราบว่ารหัสย่อในปลั๊กอินไม่ทำงานเสมอไป

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

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

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