Black-Friday • 40% OFF •

Custom Icons in Flatsome Theme

Learn how to use your own custom icon library with the Material Icons from Google.

" data-src="">

Get the best design for your Flatsome shop from $49

95% of the Flatsome shops get more conversion + sales with our designs

See our designs

Get access to Flatsome shortcode. Sign up for free

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.

This free code is locked. 

Sign Up / Login
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round"
      rel="stylesheet">
Google Fonts Material Icons Script for Header Flatsome Theme Options
Flatsome Theme Options > Header Scripts

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.

This free code is locked. 

Sign Up / Login
<span class="material-icons-outlined">
done
</span>
Placing Google Material Icons in Flatsome Theme - UX Builder
Add icon HTML code in UX Builder

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.

This free code is locked. 

Sign Up / Login
.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.

This free code is locked. 

Sign Up / Login
.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;
}
Change Menu Icon in Flatsome
Change Menu Icon in Flatsome

More popular tutorials

Discover more articles and tutorials to help you build better.

Look better. Sell Better. With our designs.

Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.

#1 WooCommerce Designs
This site uses cookies to offer you a better browsing experience.