Complete Guide to Integrating Iconfont Icon Fonts in WordPress Themes

Iconfont (Alibaba Vector Icon Library) is a professional vector icon management and exchange platform. For WordPress site owners, it's an efficient tool for adding beautiful, lightweight icons to a website.

Why Use Iconfont in WordPress?

• Vast Icon Library: Millions of high-quality vector icons contributed by designers.
• Customization: Easily search and select icons matching your site's style.
• Fast Online Loading: Use CDN links for quick font file loading with HTTPS support.
• Flexible Styling: Icons behave like fonts, allowing easy CSS adjustments for color, size, etc.

You can log in to Iconfont.cn using a Weibo or GitHub account.

How to Get Icons from Iconfont

1. Search and Collect Icons

After logging in, search for keywords (e.g., "home", "user") and click the "shopping cart" button on desired icons to add them to your collection.

2. Create a Project and Generate Code

Click the shopping cart icon, select "Add to Project" (create new or use existing). In the project page, you'll see all selected icons. Click "View Online Link" or the "Font class" tab to generate the web reference code.

Integrating Iconfont into a WordPress Theme

Step 1: Add the Icon Font CSS

Copy the CSS code from your Iconfont project's "Font class" link. Example:

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_xxxxxx.eot');
  src: url('//at.alicdn.com/t/font_xxxxxx.eot?#iefix') format('embedded-opentype'),
       url('//at.alicdn.com/t/font_xxxxxx.woff') format('woff'),
       url('//at.alicdn.com/t/font_xxxxxx.ttf') format('truetype'),
       url('//at.alicdn.com/t/font_xxxxxx.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Add this to your WordPress theme's custom CSS area. Recommended location: Appearance → Customize → Additional CSS (preserved on theme updates).

Step 2: Use Icons Where Needed

In your Iconfont project, copy the "Font Class" code for an icon (e.g., .icon-home).

Method 1: Unicode Entity

<i class="iconfont">&#xe601;</i>

Method 2: Class Name (Recommended)

<i class="iconfont icon-home"></i>

Step 3: Practical Application Examples

• Navigation Menu: In Appearance → Menus, edit a menu item and insert the icon code before the label text.
• Post/Page Content: Insert icon code in the Text/HTML mode of the editor.
• Theme Template Files: Insert icon code in PHP template files like header.php or footer.php.

Notes and Best Practices

• Version Management: If you add/remove icons in your Iconfont project, regenerate and update the CSS in WordPress.
• Custom Styling: Add CSS rules to the .iconfont class for color, size, margins, etc.
• Performance: Only include necessary icons to keep font file size small. For more control, download fonts locally and update paths.
• Accessibility: For important icons, add an aria-label attribute to the <i> tag or include hidden text.

Following these steps allows you to integrate a vast library of vector icons into your WordPress site, enhancing its visual appeal and professionalism.