Custom Icons in Flatsome Theme

In this Flatsome Theme Tutorial you will learn how to replace the Flatsome default icons with your own custom icons. You can use the Google Material Icons library to replace your header and button icons. Follow the easy steps below. For more info also visit the Material Icons Guide.

We will cover the following steps:

1. Insert the Google Fonts code
2. Placing the icons in HTML
3. Using the icons through CSS

1. Insert the Google Fonts code in Header

Copy + paste the HTML code below in your website header scripts. You can use the header scripts option in the Flatsome Theme options.

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round"
      rel="stylesheet">

2. Placing the icons in HTML

Now it’s easy to insert icons into the UX Builder with adding just a line of HTML. Choose your favorite icon through in the Material Icons Library.

<span class="material-icons-outlined">
done
</span>

Make icons size flexible with CSS

If you want the icon size to be easily adjustable, I recommend adding the following the CSS code to your WordPress website.

.material-icons, material-icons-outlined, .material-icons-round { font-size: inherit; }

3. Using icons through CSS

Now it’s time to learn how to replace the Flatsome default icons with the help of CSS code. Below you will find an example how to change the menu icon.

.header .icon-menu:before {
    content: "e164" !important;
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Final Touch: Icon Flexibility

Google Material Icons offer tremendous flexibility. You can mix and match styles, sizes, and colors using CSS to customize your icons further. With the font-size property, you can dynamically adjust the icon size to match your theme’s design.

Conclusion

Now you know how to fully customize your Flatsome theme with Google Material Icons. Whether it’s in headers, buttons, or across different sections, this guide gives you the tools to personalize your site design effortlessly. Keep experimenting with different icons and styles to make your website truly unique!