Utilizing WooCommerce Icon Font in Extensions

WooCommerce ships with a custom icon font that we use for all the icons in the WooCommerce UI, as of version 2.1. This aids performance and provides pixel perfect clarity on any screen.

If you’re building a WooCommerce extension, you may want to use these icons if you’re adding a tab to the product data or adding a new top-level menu item.

This is easy to do using SCSS/LESS and the mixins built into WooCommerce core.

Import the WooCommerce Mixins File

Import the WooCommerce core mixins into your plugin's stylesheet file, ensuring you adjust the relative path to match your actual folder structure:

SCSS 
@import 'path/to/woocommerce/assets/css/mixins';

Icon Functions

Now that you’ve imported WooCommerce’s mixins, you have access to the following functions that take care of the icon magic:

.ir(): Prepares an element for icon replacement.
.icon(): Inserts an icon.
.iconbefore(): Adds an icon before an element.
.iconafter(): Adds an icon after an element.

Using `.ir()` and `.icon()`

This function will set the height/width, text-indentation, font-family etc of an element that you want to replace entirely with an icon. For example a close button. Your markup might look like:

HTML 
<a href="#" class="close">Close</a>

To achieve this appearance as a cross rather than the word ‘Close’:

SCSS 
.close {
  .ir();
  &:before {
    .icon("\e013");
  }
}

Using `.iconbefore()`

.iconbefore() is used to insert an icon before an element. It is to be applied only to the :before pseudo element. Unlike .icon(), it is not reliant on preparation to the parent element via .ir().

SCSS 
.tab-link:before {
  .iconbefore("\e02d");
}

This prepends an element with the .tab-link class with a mail icon.

Using `.iconafter()`

As you can probably guess from the name, .iconafter() does a very similar job to .iconbefore(), except it inserts the icon after an element. .iconafter() must be applied to the :after pseudo element.

SCSS 
.tab-link:after {
  .iconafter("\e02d");
}

Custom Icons

Chances are the core WooCommerce icon font won’t contain all the icons required for your unique extension. In this case, you will need to include your own font. While this involves some work, the good news is that you can still use our icon functions, which means very little CSS authorship on your end.

To create a custom icon font you will need to:

Create the individual vectors in a program like Illustrator.
Create the font by importing them into a font creation app such as IcoMoon.

Once you’ve built your custom font you will include it in your stylesheet file (the code to do this will be provided in the package you download from IcoMoon). You can then use our icon functions, with one small exception; you will need to overwrite the font-family declaration in these functions to use your own font.

Assume the font you created is named ‘MyExtensionFont’. Taking the previous example you would instead use this:

SCSS 
.tab-link:after {
  .iconafter("\e02d");
  font-family: 'MyExtensionFont';
}

In this case, the glyph would be the appropriate glyph based on your new font.

Do I need to create a custom font?

In most cases, a fallback will exist to catch any fonts you don’t create (IE in the product data tabs). But to really give your extension a refined appearance, it’s worth the time investment!

Utilizing WooCommerce Icon Font in Extensions

Support