วิธีใช้ Font Awesome บนเว็บไซต์ WordPress ของคุณ
เผยแพร่แล้ว: 2019-02-14เมื่อมีตัวเลือกระหว่างการใช้ไอคอนเวกเตอร์หรือภาพนิ่ง ขอแนะนำให้เลือกใช้เวกเตอร์ มีขนาดเล็กและโหลดได้เร็ว และสามารถปรับขนาดได้ทุกขนาดโดยไม่สูญเสียความละเอียด Font Awesome เป็นไลบรารี่ที่ยอดเยี่ยมของไอคอนเวกเตอร์ที่คุณสามารถใช้บนเว็บไซต์ของคุณ และอาจมีรูปร่างหรือยี่ห้อแทบทุกแบบที่คุณต้องการ และดีที่สุด? นั่นฟรี. ประการที่สองคือง่าย
สมัครสมาชิกช่อง Youtube ของเรา
Font Awesome WordPress ไอคอน
การใช้ไลบรารี Font Awesome บนไซต์ WordPress ของคุณนั้นค่อนข้างไม่ลำบาก เมื่อคุณทำตามขั้นตอนง่าย ๆ เหล่านี้แล้ว คุณจะสามารถลดเวลาในการโหลดหน้าเว็บของคุณ และสร้างการออกแบบที่สะอาดตาและคมชัดโดยใช้ไอคอนเหล่านี้เป็นส่วนหนึ่งของงานของคุณ
สิ่งหนึ่งที่ต้องจำไว้คือ (โดยส่วนใหญ่) ไอคอน Font Awesome จะถูกส่งไปยังไซต์ของคุณในรูปแบบฟอนต์จริง ดังนั้นชื่อ Font Awesome คุณจะสามารถจัดรูปแบบและจัดการพวกมันได้ในทุกวิถีทางที่ปกติแล้วคุณสามารถเป็นตัวอักษรฟอนต์ได้ โดยใช้ CSS ผ่าน @font-face และ Font Awesome font-family
ด้วยเหตุนี้ คุณจึงไม่ต้องกังวลกับการปรับขนาดหรือระยะห่างสำหรับแต่ละเบราว์เซอร์หรือวิวพอร์ต ถ้ามันฟังดูดีนั่นเป็นเพราะมันเป็น และนี่คือวิธีที่คุณทำ:
การติดตั้ง Font Awesome
แม้ว่าจะมีวิธีการติดตั้งและใช้งาน Font Awesome แบบแมนนวล แต่ก็มีวิธีที่ดีกว่าสำหรับผู้ใช้ WordPress ผู้เชี่ยวชาญที่ FA ได้เปิดตัวปลั๊กอิน Font Awesome WordPress อย่างเป็นทางการและใช้งานได้อย่างสวยงาม
เมื่อติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณจะสามารถเข้าถึงรหัสย่อ [[ชื่อไอคอน]] และตัวอย่าง HTML ได้ ตราบใดที่คุณเก็บรายการไอคอน FA ที่มีประโยชน์ไว้รอบ ๆ เพื่อให้คุณรู้ว่าคุณต้องการไอคอนใด คุณจะเห็นในหน้าการตั้งค่าของปลั๊กอิน (อยู่ใน Settings – Font Awesome ) ว่าสิ่งต่าง ๆ ได้รับการตั้งค่าตามค่าเริ่มต้นอย่างไร โดยทั่วไปแล้วสิ่งเหล่านี้สามารถเก็บและใช้งานได้ดี คนส่วนใหญ่ไม่ต้องการอะไรอีกแล้ว
ตัวเลือก วิธีการ น่าจะเป็นสิ่งที่สำคัญที่สุดสำหรับคนส่วนใหญ่ คุณสามารถสลับระหว่าง Webfont หรือ SVG แม้ว่า SVG จะให้พลังและคุณสมบัติที่มากกว่า (เช่น การแปลงพลังงานและการมาสก์) Font Awesome CDN จะส่งไอคอนเป็นไฟล์ SVG ไม่ใช่เป็นแบบอักษร แม้ว่ามันจะดีกว่าในบางแง่มุม แต่เบราว์เซอร์จำนวนมากไม่รู้จัก SVG และ WordPress ก็เล่นได้ดีกับรูปภาพ SVG เสมอ ดังนั้นเราขอแนะนำให้คุณเล่นอย่างปลอดภัยด้วยเวอร์ชันเว็บฟอนต์
Font Awesome ก็เช่นกัน สำหรับเรื่องนั้น: หากคุณไม่แน่ใจถึงความแตกต่าง หรือไม่รู้ว่าเหตุใดคุณจึงต้องใช้ SVG การผสานกับวิธี webfont เริ่มต้นอาจง่ายที่สุด
ในการใช้ไอคอน Font Awesome บนไซต์ WordPress ของคุณ ทำได้ง่ายมาก เพียงเพิ่ม <i class=”fab fa-wordpress”></i> ที่ใดก็ได้ที่คุณต้องการให้ไอคอนปรากฏ ตรวจสอบให้แน่ใจว่าได้ตรวจสอบไลบรารีไอคอนเพื่อดูว่าจะใส่ชื่ออะไร
หมายเหตุ: รหัสย่อในปลั๊กอินเป็นแบบตีแล้วพลาด ไอคอนบางอันแสดงผลได้อย่างสมบูรณ์แบบ ในขณะที่บางไอคอนว่างเปล่า เราขอแนะนำให้คุณใช้การแทรก HTML เว้นแต่คุณจะเห็นว่ารหัสย่อนั้นเหมาะกับคุณ ดูตัวอย่างด้านล่างของตัวอย่าง WordPress ด้านบนไม่แสดงผล ในขณะที่ไอคอนกล้องแสดง
และคุณทำเสร็จแล้ว ปลั๊กอิน Font Awesome WordPress เหมาะสำหรับผู้ที่ไม่สะดวกที่จะเข้าไปในธีมหรือไฟล์ของตนเพื่อแทรกโค้ดที่จำเป็นอย่างอื่น อย่างไรก็ตาม หากคุณสะดวกที่จะทำเช่นนั้น คุณสามารถทำตามคำแนะนำเหล่านี้เพื่อรับไอคอน Font Awesome บนไซต์ของคุณ
การติดตั้งไอคอน Font Awesome ด้วยตนเอง
สิ่งแรกที่คุณต้องทำคือไปที่เว็บไซต์ Font Awesome จากนั้นคลิกที่ปุ่ม เริ่มใช้ฟรี พวกเขาเสนอแผนชำระเงินสำหรับผู้ที่มีไซต์ที่มีการเข้าชมสูงและต้องการโซลูชันระดับองค์กร แต่บุคคลทั่วไปสามารถใช้เวอร์ชันฟรีได้ คุณได้รับ 1,500 ไอคอนฟรี และมากกว่า 5,000 ตัวแปรในแผน Pro
ขั้นตอนต่อไปคือการคัดลอก/วาง แต่คุณจะต้องแน่ใจว่าคุณได้เน้นตัวเลือกเว็บฟอนต์ เช่นเดียวกับที่เราได้พูดคุยกันก่อนหน้านี้
ธีมส่วนใหญ่มีที่ให้คุณแทรกโค้ดลงใน <head> ของไซต์โดยอัตโนมัติ ตัวอย่างเช่น ในกรณีของ Divi คุณจะต้องไปที่ Theme Options – Integrations และวางโค้ดนี้ลงในฟิลด์ที่ระบุว่า Add code to the Head ของบล็อกของคุณ
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
เมื่อคุณกดบันทึก คุณสามารถเริ่มรวมไอคอนใดก็ได้ที่คุณต้องการ เช่นเดียวกับที่เราทำด้านบน เท่านั้น คุณ ไม่สามารถเข้าถึงรหัสย่อได้ โดยทำสิ่งนี้
หากธีมของคุณไม่รองรับการผสานโค้ด
หากคุณไม่พบสถานที่แบบนี้ในธีมของคุณ การทำด้วยตนเองก็ง่ายเช่นเดียวกัน คุณจะต้องขุดลงไปในไฟล์ Core ของธีมของคุณก่อน ถึงจะทำแบบนั้นได้ แต่มันเป็นการคัดลอก/วางที่รวดเร็วมาก และ (โดยทั่วไป) ก็ค่อนข้างปลอดภัยที่จะทำ ไปที่ Appearance – Editor ในแดชบอร์ด WP ของคุณและค้นหา ไฟล์ header.php
ค้นหาบรรทัดที่เขียน </head> และก่อนหน้านั้น คุณต้องวางโค้ดเดียวกันจาก Font Awesome กด Update File และคุณจะสามารถเริ่มใช้ไอคอน FA ได้ทันที อีกครั้ง คุณจะไม่ได้รับรหัสย่อเมื่อติดตั้ง Font Awesome ด้วยวิธีนี้
นอกจากนี้ โปรดทราบว่าเมื่อใดก็ตามที่คุณแก้ไขไฟล์ธีม คุณต้องการใช้ธีมย่อย การทำเช่นนี้จะช่วยป้องกันไม่ให้การเปลี่ยนแปลงที่คุณทำถูกเขียนทับเมื่อธีมอัปเดต
ตัวเลือกเพิ่มเติมสำหรับการติดตั้ง
และหากคุณมีความต้องการเฉพาะอื่นๆ สำหรับ Font Awesome ความต้องการเหล่านี้ก็มีหลายวิธีในการเข้าถึงไลบรารี ตั้งแต่การติดตั้ง NPM และ Yarn ไปจนถึงการผสานรวม Sketch และ React มีตัวเลือกมากมายหากคุณต้องการมากกว่า WordPress
การจัดแต่งแบบอักษรไอคอนสุดเจ๋ง
เมื่อคุณติดตั้งแล้ว ก็ถึงเวลาทำให้ไอคอนปรากฏขึ้น คุณสามารถทำได้โดยใช้ CSS เนื่องจากแต่ละไอคอนอยู่ภายใต้คลาส CSS สองสไตล์ที่ใช้บ่อยที่สุดคือสีและขนาด คุณสามารถใส่สไตล์ CSS ลงในสไตล์ชีตของคุณ หรือจะใส่ในบรรทัดก็ได้ โดยทั่วไป คุณอาจต้องการใช้การจัดรูปแบบอินไลน์ เนื่องจากไอคอนเหล่านี้มักไม่มีลักษณะเป็นสากลทั่วทั้งไซต์
เว็บไซต์ Font Awesome มีตัวอย่างวิธีการทำเช่นนี้ พวกเขาแสดงขนาดโดยใช้ไอคอนกระท่อมน้ำแข็งและคลาสเพิ่มเติม เช่น fa-xs หรือ fa-xl หรือ fa-2x สำหรับขนาดเฉพาะ
นอกจากนี้ หากคุณต้องการให้ไอคอนสัมพันธ์กับขนาดเฉพาะและค่าสัมบูรณ์ใช้ไม่ได้ คุณสามารถวางไอคอนนั้นใน <div> เพื่อให้ทำงานได้ภายในข้อจำกัดของคุณ
<div style="font-size: 0.5rem;"> <i class="fas fa-igloo fa-10x"></i> </div>
ห่อ
และนั่นแหล่ะ! ยอดเยี่ยมใช่มั้ย? ไม่ว่าคุณจะใช้ปลั๊กอิน Font Awesome WordPress หรือแทรกโค้ดด้วยตนเอง การทำให้ไซต์ของคุณเริ่มทำงานได้นั้นใช้เวลาไม่เกินสองสามขั้นตอน Font Awesome ได้รับความนิยมด้วยเหตุผลบางประการ และบางส่วนก็มาจากความสะดวกในการใช้งาน ออกไปที่นั่นและเจ๋งไปเลย!
วิธีที่คุณชื่นชอบในการใช้ไอคอน Font Awesome คืออะไร
บทความที่ได้รับความอนุเคราะห์จาก Font Awesome