It started on a quiet evening when you were sipping coffee and tweaking your website. Suddenly, you noticed those pesky Themify icons slowing down your load time and cluttering your design.
You might have thought, “I don’t even remember asking for these icons to crash my website party!” Well, no worries—we’re here to save the day.
This guide will walk you through how to delete Themify icons from your website step by step. Let’s fix this, shall we?
Why Delete Themify Icons?
First, let’s understand why these icons might need to go:
- Website Speed: Themify icons add extra CSS or JavaScript, which can drag down your site’s performance.
- Design Clash: Maybe they don’t fit your current aesthetic or branding.
- Minimalism: Streamlining your website is always a good idea.
- Conflict Resolution: Sometimes, they interfere with other plugins or themes.
Did you know that removing unused CSS can improve your page load time by up to 35%? Yup, every little bit counts.
Step 1: Remove the Themify Icons CSS
Themify icons are usually loaded through a CSS file. To remove them, you’ll need to stop this file from loading.
Steps:
- Find the CSS File:
- Open your website in a browser.
- Right-click and select “Inspect” or “View Page Source.”
- Look for
themify-icons.css
in the loaded resources.
- Deregister the CSS File in WordPress:
- Go to your WordPress admin dashboard.
- Navigate to Appearance > Theme Editor and open the
functions.php
file. - Add this code snippet:
function remove_themify_icons() {
wp_dequeue_style('themify-icons');
wp_deregister_style('themify-icons');
}
add_action('wp_enqueue_scripts', 'remove_themify_icons', 20);
- Save your changes and refresh your website. Bye-bye, Themify icons!
Step 2: Delete Themify Icon Files from Your Server
To fully remove Themify icons, you’ll need to delete the actual files from your server.
Steps:
- Access your site’s files via FTP, cPanel, or your hosting’s file manager.
- Navigate to the folder:
wp-content/themes/{your-theme}/assets/themify-icons/
- Delete the folder or individual files.
Warning: Always back up your website before making changes.
Step 3: Fix Broken Icon References
After removing Themify icons, you might see placeholder squares or symbols where the icons used to be. This happens because the icon classes are still referenced in your code.
How to Fix:
- Look for
ti-
classes in your theme files or custom CSS (e.g.,ti-home
,ti-user
). - Replace these classes with those from a new icon library (like Font Awesome) or remove them entirely.
For example:
<i class="ti-home"></i>
Replace it with:
<i class="fa fa-home"></i>
Step 4: Choose a Lightweight Alternative
Need icons but want something faster and sleeker? Here are some options:
- Font Awesome:
- Free and easy to use.
- Offers thousands of icons for various needs.
- Google Material Icons:
- Minimalistic and modern.
- Perfect for clean, professional designs.
- Custom SVG Icons:
- Upload your own SVG files for total control.
- Lightweight and no external dependencies.
Speed Check: Did It Work?
After removing Themify icons, test your website’s speed to see the improvement. Use tools like:
A faster website not only pleases visitors but also makes Google happy. And who doesn’t want to rank higher on search engines?
FAQs
Can I remove Themify icons without touching code?
Some themes or plugins let you disable Themify icons through settings. Check your theme’s documentation.
What happens if I delete Themify icons but don’t fix references?
You’ll see broken icons (usually squares or blank spaces) on your site.
Is it safe to delete Themify icons?
Yes, as long as you back up your site first and carefully remove references to the icons.
Final Thoughts
Remember, you’re the boss of your website. Themify icons might have been helpful at one point, but if they’re no longer serving you, it’s time to let them go.
With these steps, you’ve got the tools to take control, boost performance, and clean up your site. Now go forth and declutter like a pro! 🚀