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 and the mixins built into WooCommerce core.

Import the WooCommerce _mixins.scss file

↑ Back to top

First import the WooCommerce core mixins into your plugins admin.less file. Assuming your admin.less file is located at your-plugin/assets/css/admin.less you would add the following:

@import '../../../woocommerce/assets/css/_mixins.scss';

Not only does this give you access to the handy icon functions, but also all other mixins we use in WooCommerce.

Icon functions

↑ Back to top

Now that you’ve imported WooCommerce’s mixins.less file, 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

.ir();

↑ Back to top

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:

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

While you just want this to appear as a cross rather than the word ‘Close’. To achieve this you’d add the following SCSS:

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

In this example, the appropriate styles to prepare the element for icon replacement are applied to .close and the icon is inserted using .icon() on the :before pseudo element…

.icon();

↑ Back to top

This function is to be used on the :before or :after pseudo-element only. It applies the correct position, alignment, line-height and specifies which glyph to use from the WooCommerce icon font. You can find a full list of icons and their corresponding glyphs here:

.iconbefore();

↑ Back to top

.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();.

All you need to do to add an icon before an element (for example in the product data tabs) is specify the following:

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

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

.iconafter();

↑ Back to top

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

Using the same example as above, if you wanted to add the icon after the element you would use:

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

Custom Icons

↑ Back to top

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 admin.less 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:

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

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

Do I need to create a custom font?

↑ Back to top

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!

How can I see all of the icons in the font?

↑ Back to top

Download the .zip file at Github and view the demo.html file.