จะเพิ่มไอคอนเมนู WordPress CSS ได้อย่างไร?ติดตั้งปลั๊กอินแบบอักษรไอคอนการนำทาง WP

WordPressจะเพิ่มไอคอนเมนู CSS ได้อย่างไร?

ติดตั้งปลั๊กอินแบบอักษรไอคอนการนำทาง WP

สื่อใหม่คนทำSEO (Search Engine Optimization)เป็นการเพิ่มประสิทธิภาพเว็บไซต์และปรับปรุงประสบการณ์ผู้ใช้

คุณสามารถเพิ่มแบบอักษรของไอคอนลงในเว็บไซต์ WordPress ของคุณได้ ซึ่งมีความสวยงามมากและรองรับเทมเพลตธีม WP ที่ตอบสนองการออกแบบ

แบบอักษรของไอคอนและไอคอนในรูปแบบรูปภาพขนาดเล็กจะแตกต่างกัน:

  • รองรับการแสดงผลเรตินา
  • สามารถไม่ จำกัดขยาย.
  • ปรับแต่งรายการในเมนูการนำทางทีละรายการเป็นแบบอักษรไอคอน

สามารถดูไดอะแกรมเอฟเฟกต์เฉพาะได้เฉิน เว่ยเหลียงเมนูการนำทางบล็อก

วิธีการใช้แบบอักษรของไอคอน?

ขั้นตอนที่ 1:ติดตั้งปลั๊กอิน

  • พื้นหลัง WP → ปลั๊กอิน → ติดตั้งปลั๊กอิน → ค้นหา "Font Awesome 4 Menus" ดาวน์โหลดและติดตั้งและเปิดใช้งาน
  • คุณยังสามารถดาวน์โหลดโดยตรงจากเว็บไซต์ จากนั้นอัปโหลดหรือติดตั้งผ่าน FTP หลังจากอัปโหลด

ขั้นตอนที่ 2:ค้นหาไอคอนแบบอักษร

คลิกที่นี่เพื่อไปที่เว็บไซต์ทางการของ Icon Fonts

เปิดเว็บไซต์อย่างเป็นทางการของแบบอักษรของไอคอนและค้นหาไอคอนที่เราต้องการ▼

ไอคอนฟอนต์ Font-Awesome หน้าแรก

  • ซึ่งคุณสามารถแสดงได้เมื่อคุณคลิกที่ไอคอน <i class =“fa fa-home”> </ i>คัดลอก ฟ้า ฟ้าโฮม.
  • หากชื่อไอคอนบ้านคือบ้าน เราต้องป้อนใน "เมนู CSS คลาส" fas fa-home

ขั้นตอนที่ 3:เมนูอินพุตไอคอนแบบอักษรคลาส CSS

  • พื้นหลัง WP → ลักษณะที่ปรากฏ → เมนู เข้าสู่หน้าการตั้งค่าเมนู
  • เลือกและแก้ไขรายการเมนู
  • ในคลาส CSS วางชื่อฟอนต์ของไอคอนที่เราเพิ่งคัดลอก (fa fa-home) ▼

เมนูนำทาง WordPress CSS ไอคอนแบบอักษร

  • (การทำงานของไอคอนอื่นจะเหมือนกัน)
  • สุดท้ายคลิกบันทึก

注意事项

หากคุณไม่มีคลาส CSS ในแผงแก้ไขรายการเมนู คุณสามารถเปิด "ตัวเลือกการแสดงผล" ที่มุมบนขวาและในแสดงคุณสมบัติขั้นสูงของเมนู, เลือก "คลาส CSS" ▼

ในเมนูนำทางของ WordPress ให้เลือกหมวดหมู่ CSS

  • แน่นอน ไลบรารีแบบอักษรของไอคอนนี้ไม่จำกัดเฉพาะในเมนูการนำทาง ตราบใดที่รหัสไอคอนที่เกี่ยวข้องถูกเพิ่มในตำแหน่งที่สอดคล้องกันของเทมเพลตธีม

หวัง Chen Weiliang บล็อก ( https://www.chenweiliang.com/ ) แชร์ "จะเพิ่มไอคอนเมนู WordPress ได้อย่างไร CSS?ติดตั้งปลั๊กอินแบบอักษรไอคอนการนำทาง WP" มันจะช่วยคุณได้

ยินดีต้อนรับสู่การแบ่งปันลิงค์ของบทความนี้:https://www.chenweiliang.com/cwl-642.html

หากต้องการปลดล็อคเคล็ดลับที่ซ่อนอยู่เพิ่มเติม ยินดีต้อนรับเข้าร่วมช่อง Telegram ของเรา!

แชร์และกดไลค์ถ้าคุณชอบ! การแชร์และการถูกใจของคุณคือแรงบันดาลใจอย่างต่อเนื่องของเรา!

 

发表评论

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ 必填项已用 * 标注

เลื่อนไปที่ด้านบน