Custom icons

Custom Font Awesome Free filter icons style of the annasta Woocommerce Product Filters WordPress plugin

The custom filter icons option allows you to choose any of the Font Awesome Free icons for your filters, with hover state support for both selected and unselected filter icons.

Custom filter icons management in the annasta Woocommerce Product Filters

To setup custom icons for you filter, select the Custom icons option of the Filter style select box. Some commonly used icons are presented at the bottom of the Custom Icons Settings admin section. You can copy them into the clipboard by clicking on them. If you need something more customized, please visit the Font Awesome Gallery for a full selection of Font Awesome Free icons.

Copy > paste Font Awesome Free icons in the regular and hover state fields for Inactive (unchecked) and Active (checked) filter icons. Use the Solid style option to achieve the needed effect.

Some Font Awesome icons are available only in Solid or Regular style. If the icon that you need is not showing properly, toggle its Solid style checkbox to see if it fixes the problem.

The interactive filter items Preview next to the settings fields will allow you to assess the appearance of your filter even before saving the options. Bring your mouse pointer to the filter item label of the Preview section to see the hover effects that you have created.

If you don’t wish to have the hover effect, assign the same icon to the non-hover and hover states.