Hustle is messing up our icon fonts

Hustle adds some CSS to the frontend which selects: [class^="icon-"]:before, [class*=" icon-"]:before and adds font-family “hustle”.

We use icomoon and this conflicts.

Please can you change the class names to icon-hustle- or something so it does not conflict?

  • Sajid
    • DEV MAN’s Sidekick

    Hello Shaun,

    Hope you are doing good today :slight_smile:

    I am using icomoons on my own site using the Menu Icons plugin along with Hustle enabled and both working fine together.

    Is it coming from your theme or how you are exactly using ?

    Could you please share the screenshot of the issue and also link to page so I could take a closer look at it. Also, please enable support staff access too.

    To grant access go to Dashboard -> WPMU DEV -> Support -> Support Access -> Grant Support Access or see this manual for more details regarding how to enable support staff access.

    Take care and have a nice day :slight_smile:

    Best Regards,

    Sajid – WPMU DEV Support

  • Shaun
    • The Incredible Code Injector

    I’m talking about the fronend of the site.

    CSS is added to the frontend which conflicts with icomoon.

    Above is a screenshot of the code, I’m using the class “icon-sm-twitter” to set a twitter icon here but as you can see the Hustle css is changing the font family to “hustle” when it should be “icomoon”.

  • robert_woodson
    • WPMU DEV Initiate

    Has any solution been found for this. I’m using Flatsome Theme which uses iconmoon fonts for social media icons. With Hustle activated they don’t show on the front end. With is deactivated they do. Inspector shows the same as Shaun. I tried to overwrite it but no luck yet.

  • Sajid
    • DEV MAN’s Sidekick

    Hello Shaun,

    Hope you are doing good :slight_smile:

    Yes, I understand that the issue is on frontend instead of backend. I see your screenshot and trust that is showing the way you described.

    But I requested to get the link of the page where you are trying to use icomoon and hustle is breaking that icon. This way, I would be able to provide you a work around beside reporting it to our developer. So before they look in to it and consider adding it, we have a work around like posted by robert_woodson.

    robert_woodson I would ask the same to you. Please share the link of that page and also keep the hustle plugin enabled (a screenshot would be helpful to point out the issue).

    Best Regards,

    Sajid – WPMU DEV Support

  • Denitsa
    • WordPress Warrior

    Hello Shaun,

    Did that resolve the issue for you? Please let us know if you have any confusion or any further query. We will be glad to help.

    Hey there robert_woodson,

    Usually, you’d want to open another ticket regarding your issue (using this link https://premium.wpmudev.org/forums/#question)? That way it will remain independent of this thread so the two won’t get confused.

    As a solution here can you please try the following code snippet, you can add that via that plugin here (https://wordpress.org/plugins/code-snippets/) or in a child theme’s functions.php file:

    function remove_hustle_font() {
    wp_dequeue_style('hustle');
    }
    add_action( 'wp_enqueue_scripts', 'remove_hustle_font', 99 );

    If you want to use custom CSS (either in your child theme’s style.css or via a plugin like https://wordpress.org/plugins/simple-custom-css/) it should look like so (as suggested in this post here):

    [class^="icon-"]:before,
    [class*=" icon-"]:before {
    font-family: YOUR_FONT !important;
    }
    .wpoi-hustle .wpoi-content .wpoi-message p, .wpoi-hustle .wpoi-content h2.wpoi-title, .wpoi-hustle .wpoi-button button {
    font-family: SOME_FONT;
    }

    Best regards,

    Denitsa

  • Denitsa
    • WordPress Warrior

    Hey Shaun,

    I’m on the same page as you here, so I have already notified the developers about this. Most likely a fix should be provided with the next plugin update. I’ll keep you posted once a solution is out!

    Thanks you for your patience on this one!

    Regards,

    Denitsa

  • Sajid
    • DEV MAN’s Sidekick

    Hello Princessa,

    Hope you are doing good today :slight_smile:

    You can use it both ways. If you want the plugin to be network activated then you can simply add that code in mu-plugin that will run on entire network and work on all sites.

    Here is the example mu-plugin for this one:

    <?php

    function wpmudev_hustlet_icon_fix(){ ?>
    <style type="text/css">
    [class^="icon-"]:before,
    [class*=" icon-"]:before {
    font-family: YOUR_FONT !important;
    }
    .wpoi-hustle .wpoi-content .wpoi-message p, .wpoi-hustle .wpoi-content h2.wpoi-title, .wpoi-hustle .wpoi-button button {
    font-family: SOME_FONT;
    }
    </style>
    <?php }
    add_action('wp_head', 'wpmudev_hustlet_icon_fix');

    Copy the code, create an empty PPH file with any name like hustle-icons-fix.php paste the code in this file and upload it to /wp-content/mu-plugins/ folder (create if not exists).

    I am also attaching the .zip file containing the above code ready to move in /wp-content/mu-plugins/ folder.

    1. Download the file attached with this reply.

    2. Extract/unzip on your computer (if your browser does not extract automatically).

    3. Upload on your site on following folder via FTP or FileManager of cPanel (create mu-plugins folder if not exists).

    ../wp-content/mu-plugins/

    If you have any followup questions that is not covered above or in this reply then please create your own ticket so we could assist you further. Include this thread link for reference.

    Take care and have a nice day :slight_smile:

    Best Regards,

    Sajid – WPMU DEV Support

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.