Note: This is a Developer level doc.
Import the WooCommerce _mixins.scss file
↑ Back to top@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 topir();
– Prepares an element for icon replacementicon();
– Inserts an iconiconbefore();
– adds an icon before an elementiconafter();
– adds an icon after an element
.ir();
↑ Back to top<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: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.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- Create the individual vectors in a program like Illustrator
- Create the font by importing them into a font creation app such as IcoMoon
.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 topHow can I see all of the icons in the font?
↑ Back to topdemo.html
file.