Fast Way to Replace Emojis with Custom Icons

Status

Draft

Fast Way to Replace Emojis with Custom Icons

Welcome to this tutorial! Today, I’m going to show you a quick and easy way to replace those outdated and ugly emojis on your WordPress site with modern, clean icons from two popular libraries: Material Icons and Feather Icons.

Back to tutorials

Whether you’re looking for a vast selection with Material Icons or a lightweight, minimalist option with Feather Icons, I’ve got you covered. I’ll guide you through the process of choosing your preferred icon library and implementing it with a simple PHP snippet.

Not sure which icon library to choose? Here’s a quick comparison to help you decide between the extensive collection of Material Icons and the lighweight, minimalist Feather Icons:

Comparison: Material Icons vs. Feather Icons

Feature	Material Icons	Feather Icons
Icon Collection	Extensive (2,000+ icons)	Minimalist (over 200 icons)
Design Style	Bold, varied, modern	Simple, lightweight, outline
File Size	Larger, more resources needed	Lightweight, fast loading
Performance	Slower due to size	Faster, minimal impact
Usage	Great for rich, diverse iconography	Ideal for clean, simple designs

Adding the Snippet

You can add the following PHP snippet to your website using WP CodeBox or any other snippet plugin. Alternatively, you can place it directly into your theme’s functions.php file.

PHP Snippet for Material Icons:

<?php
/*
Plugin Name: Emoji Replacer with Material Icons
Description: Replace specific emojis with Material Icons with size adjustment.
Version: 1.3
Author: Seb de la Web
*/

// Enqueue Material Icons
function emoji_to_icon_enqueue_scripts() {
    wp_enqueue_style('material-icons', 'https://fonts.googleapis.com/icon?family=Material+Icons');
}
add_action('wp_enqueue_scripts', 'emoji_to_icon_enqueue_scripts');

function emoji_to_icon_script() {
    ?>
    <style>
        .custom-emoji {
            font-size: 1em; /* Adjust size */
            vertical-align: middle;
            display: inline-flex;
            align-items: center;
        }

        .emoji-hide {
            font-size: 0 !important;
        }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const emojiIcons = {
            '↗️': 'open_in_new',
            '❤️': 'favorite',
            '▶️': 'play_arrow',
            '👍': 'thumb_up',
            '😎': 'face',
            '🎉': 'celebration'
        };

        const emojiRegex = new RegExp(Object.keys(emojiIcons).join('|'), 'g');

        function replaceEmojis(element) {
            if (!element) return;

            element.childNodes.forEach(node => {
                if (node.nodeType === 3 && emojiRegex.test(node.nodeValue)) {
                    const span = document.createElement('span');
                    span.innerHTML = node.nodeValue.replace(emojiRegex, match =>
                        `<span class="material-icons custom-emoji" style="font-size: 1em;">${emojiIcons[match]}</span>`
                    );
                    node.parentNode.replaceChild(span, node);
                } else if (node.nodeType === 1) {
                    replaceEmojis(node);
                }
            });
        }

        replaceEmojis(document.body);
    });
    </script>
    <?php
}
add_action('wp_footer', 'emoji_to_icon_script');
?>

PHP Snippet for Feather Icons:

<?php
/*
Plugin Name: Emoji Replacer with Feather Icons
Description: Replace specific emojis with Feather Icons with size adjustment.
Version: 1.3
Author: Seb de la Web
*/

// Enqueue Feather Icons
function emoji_to_icon_enqueue_scripts() {
    wp_enqueue_script('feather-icons', 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js', [], null, true);
}
add_action('wp_enqueue_scripts', 'emoji_to_icon_enqueue_scripts');

function emoji_to_icon_script() {
    ?>
    <style>
        .custom-emoji {
            width: 1em;
            height: 1em;
            vertical-align: middle;
            display: inline-flex;
            align-items: center;
            stroke-width: 2; /* Adjust stroke thickness */
        }

        .emoji-hide {
            font-size: 0 !important;
        }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const emojiIcons = {
            '↗️': 'external-link',
            '❤️': 'heart',
            '▶️': 'play',
            '👍': 'thumbs-up',
            '😎': 'smile',
            '🎉': 'gift'
        };

        const emojiRegex = new RegExp(Object.keys(emojiIcons).join('|'), 'g');

        function replaceEmojis(element) {
            if (!element) return;

            element.childNodes.forEach(node => {
                if (node.nodeType === 3 && emojiRegex.test(node.nodeValue)) {
                    const span = document.createElement('span');
                    span.innerHTML = node.nodeValue.replace(emojiRegex, match =>
                        `<i data-feather="${emojiIcons[match]}" class="custom-emoji" style="width: 1em; height: 1em;"></i>`
                    );
                    node.parentNode.replaceChild(span, node);
                } else if (node.nodeType === 1) {
                    replaceEmojis(node);
                }
            });
        }

        replaceEmojis(document.body);

        // Apply Feather Icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    });
    </script>
    <?php
}
add_action('wp_footer', 'emoji_to_icon_script');
?>

How to Use the Snippet

Add the Snippet: Use WP CodeBox or another snippet plugin, or paste it in functions.php.
Choose Your Library: Copy the snippet for either Feather Icons or Material Icons.
Save and Activate: Make sure the snippet is active.
Check Your Site: Refresh your site and test a few pages to see the new icons in action.

Final Thoughts

Replacing emojis with modern icons instantly improves your website’s aesthetic while keeping it professional and visually appealing. Choose Material Icons if you need a wide range of icon choices, or Feather Icons if speed and simplicity are more important to you.

If you found this tutorial helpful, give it a thumbs up and subscribe for more tips on customizing your WooCommerce site.

👨‍💻

Having trouble?

Before reaching out, check out our troubleshooting video because I don’t provide support for Flatsome or WooCommerce-related issues. Other questions? Contact us.

All tutorials

Premium products