The font used throughout the WooCommerce UI for all icons. Designed by WooThemes, compiled using IcoMoon.
Click here to view all the available icons.
When using the icons in a separate project.
- Include
style.css
. - Apply relevant classes to elements, e.g.
<span class=".wcicon-virtual"></span>
. - Optionally include
lte-ie7.js
in conditional tags for support in IE7 and below.
When using the icons in a WooCommerce extension.
- Include the WooCommerce
mixins.scss
file in your plugin's .scss file:@import '../../../woocommerce/assets/css/mixins.scss';
(Based on your .scss being located atyour-plugins/assets/css/yourstyles.scss
). - Use WooCommerce' built-in functions to set an icon, e.g:
// Hides an elements content, reshapes it into a 1em x 1em square containing a centrally aligned icon
.icon {
@include .ir; // Icon replacement
}
.icon:before {
@include .icon( "\e000" ); // Icon styles and glyph
}
Or:
// Prepends an element with an icon
.icon-link:before {
@include .iconbefore( "\e000" ); // Icon styles and glyph
}
Or:
// Appends an element with an icon
.icon-link:after {
@include .iconafter( "\e000" ); // Icon styles and glyph
}
See index.html
for the glyph references.
- Added ccv icon
- Added edit icon
- Initial Release!