Two Methods to Use Iconfont Icons in WordPress Themes

2020-03-20 · Ryan · Post Comment

Iconfont vector icons are widely used in web design and are essential for modern websites. They can be applied to various elements like navigation menus and headings, offering great utility for both designers and site owners.

Iconfont, created by Alimama MUX, is a comprehensive platform for managing and sharing vector icons with a vast library of resources. This tutorial explains two methods to integrate Iconfont icons into a WordPress theme.

Method 1: Using CSS @font-face

This method involves embedding Iconfont font files into your theme's stylesheet and using CSS classes to display icons.

Step 1: Register and Search for Icons

Visit the Iconfont website, register, and log in. Search for the icons you need and add them to your project by clicking the shopping cart icon on each icon.

Step 2: Create a Project and Add Icons

You can add multiple icons. After selection, click the floating shopping cart icon on the right and choose "Add to Project." If it's your first time, you'll be prompted to create a new project by entering a name.

Step 3: Get the Code and Add to Theme

After adding icons, you'll be redirected to "My Project." Find the "View Online Link" or "Font class" option. Click to get CSS code similar to the example below.

Copy the generated CSS code and paste it into your WordPress theme's main stylesheet (typically style.css).

/* Replace with your project's code */
@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;
}

Step 4: Use Icons in the Theme

In your Iconfont project, find the desired icon and copy its character code (e.g.,  or e871).

In your theme's HTML template files, use it as follows:

<i class="iconfont">&#xe871;</i>
<!-- Or using a CSS pseudo-element -->
<span class="iconfont"></span>

For the second method, you need to add a content property in your CSS:

.your-icon-class::before {
  content: "\e871"; /* Note the backslash */
  font-family: "iconfont";
}

Method 2: Using a CDN Link (Recommended)

This simpler and more efficient method involves directly linking to the CSS file generated by Iconfont, making management and updates easier.

Steps

In your Iconfont project page, select the "Font class" method.
Click "Generate Code" to get a CSS link starting with //at.alicdn.com.
Add this link to your theme's <head> section or enqueue it using WordPress's wp_enqueue_style() function.

Example: Enqueuing via functions.php

function mytheme_enqueue_iconfont() {
    wp_enqueue_style( 'mytheme-iconfont', '//at.alicdn.com/t/font_xxxxxx.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_iconfont' );

After enqueuing, use the provided CSS class names directly in your theme:

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

Advantages of Method 2:

Easy Maintenance: When you update icons in your Iconfont project, simply republish; the CDN link updates automatically without code changes.
Better Performance: Font files are hosted on Alibaba Cloud CDN for fast loading.
Simple Usage: Use intuitive class names like icon-home instead of character codes.

For most WordPress theme development, Method 2 (CDN) is recommended for its efficiency and maintainability.