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:
- Insert the Google Fonts code
- Placing the icons in HTML
- 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; }
More popular tutorials
Discover more articles and tutorials to help you build better.
Linktree Alternative for Flatsome Theme
Automatic Popup with Lightbox in Flatsome Theme
Upload a custom font in Flatsome Theme
Black Friday ⚡ Limited offer 50%-Off
Look better. Sell Better. With our designs.
Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.