Do you know how to use custom icons in the Flatsome theme?
If not, don’t worry, we’ve come up with a simple tutorial to use custom icons in the Flatsome theme.
Custom Icons are widely used for better design of the website. Google is the most popular and widely used for custom icons among the icon creators. You can use a vast number of icons from Google for absolutely free.
To use custom icons, you just need to copy some code and paste it to your site to use custom icons.
Why Do You Need Custom Icon?
Flatsome provides a good number of icons to use for your website. But sometimes, you may need to use icons unavailable in Flatsome. Or you may prefer the design of any other individual company.
There can be thousands of reasons for using a custom theme. So, it’s better to know how you can add custom icons.
Does It Require Coding?
Don’t worry about the code; you don’t need to understand the code or any of the coding procedures. All you need is to select the code and copy it, then paste it in the appropriate place. If you want, you don’t even need to select and copy the code, the code will be auto copied to your device by clicking on a copy button.
Adding a custom icon may seem a bit technical but it’s not. I can assure you, without any coding, you can add custom icons using only these 12 steps.
How to Use Custom Icon in Flatsome Theme: 12 Steps Only
Step 1: Go to the Google Icon and find which icon you want to use.
Step 2: Choose an icon and click on it. A slider will appear on the right side, you can find an option named Web, click it.
Step 3: Scroll down that section and find section Static icon font. You’ll find two sections of code there. Copy the first one manually or by clicking on the right of that section.
Step 4: Go to the WordPress Dashboard. Hover your pointer on the Flatsome. A section will appear. Click on the option named Advanced.
Step 5: A new window will appear. Click on the Global Setting. You’ll find a box with a heading of Header Script. Click on the box and paste what you’ve copied.
Step 6: Scroll down and click on the Save Changes
Step 7: Scroll up and click on the Save Changes on the left again.
Step 8: Go to the main website and hover the pointer on the Edit Page and click on the Edit with UX Builder.
Step 9: To add a custom icon below the title, click on the text.
Step 10: A new window with several options will appear. Click on the text box section.
Step 11: Copy the 2nd code from step 3 and paste the code you copied. An icon will appear under the title. Click on Apply button to execute this setting.
Step 12: A new window will appear. Click on Update to save the new edit.
Final Preview: The icon will be displayed where we wanted to place it.
Adding a custom icon is super-easy. If you’re facing any issue, try from the beginning again and understand the process from scratch. For the sake of example, we’ve put the custom icon under a title, but this is not the only place to put your custom icon.
You can add a custom icon anywhere on the website. All you need is to click on your desired place instead of the title in step 9 and follow the same process. You can also drop a comment about the difficulty you may face.
If you like the tutorial and want to work more in Flatsome, you may read our other tutorials on Flatsome to be an expert.