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">

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.

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

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.

.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;
}

Change Menu Icon in Flatsome