WordPress子主题使用阿里矢量图标美化导航(WordPress图标设置)

Wordpress2年前 (2023)发布 SUYEONE
2K 0 0

大多数WordPress网站倾向于使用Font Awesome for its vector icons, but there’s a concern about the aesthetics of these icons. Today, we’ll guide you on how to integrate Alibaba‘s Vector Icons into your WordPress site for a more appealing look.

1. **Access Alibaba’s Vector Icon Library**
Visit the Website at `iconfont.cn`.

2. **Sign Up and Log In**
Register an account if you don’t have one already.

3. **Search for Icons**
Look for the icons you desire directly in the search bar on the homepage.

4. **Add Icons to Cart**
Once found, add the icons to your cart.

5. **Create a Project**
After adding icons, proceed to add them to a project.

6. **Select Symbol Format**
Choose the symbol format and click ‘Generate’ if you haven’t got the code yet.

7. **Integrate the Code into Your Theme**
Paste the application code in your theme. For this, navigate to: Child Theme -> Customization -> Custom HTML Code -> Add the just-copied js format code.

If you add more icons later, remember to regenerate the code from the Alibaba Icon Library.

**Importantly, Using the Icons in Navigation Menu (Step 1)**

1. The `[Add your icon code]` in the code refers to the `ico` code copied from Alibaba’s Vector Icon Library:

2. In your WordPress backend, go to: Appearance -> Menus -> Add the above code before the text in your menu item -> Save.

**Final Result:**
Your WordPress site will now display the new, visually-enhanced icons from Alibaba’s Vector Icon Library.

By following these steps, you can significantly enhance the visual appeal of your WordPress site with Alibaba’s icons while mAIntaining the flexibility to update your icon collection as needed.

© 版权声明

相关文章

暂无评论

暂无评论...
☺一键登录开启个人书签等功能!