Replace Flatsome or Woocommerce Icons
Last updated
Last updated
In this guide, we're going to show you how to switch things up and give your site a fresh, modern vibe by changing those icons by Ionicons ones. It's easier than you think, so let's get started on making your website look just the way you want it!
We're going to use Ionicons Library which is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps.
In order to replace the Flatsome or Woocommerce icon correcly, you must find what's the CSS class used by the icon. To know better what class is this, do the following:
Inspect the page (Use the shortcut control-shift-C on Windows or command-option-C on macOS)
Select the arrow icon in the right top corner of the page that appears on the "Inspect Panel"
Hover the mouse on the icon you want to find the class
That's how you discover the icon class name. Or you can just scroll down here and see the Flatsome icon classes name.
If you don't find the icon in the list below, please use the first Inspect Page method above.
To replace Flatsome or Woocommerce icons with your ones, add the CSS below on Appearance > Customize > Additional CSS and replace with the correct info.
To change the color of the SVG icon that you uploaded to your website, use the "filter" CSS sttribute like the code below whici was generated from this CSS Color Filter Generator:
See a real example of a Facebook icon replacement:
This sample code above might not work with other icon libraries.
Ready! Heaven's the limit for your creativity.
