Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save julian-stark/08af8559a691b0b8b39bf7c509bcf1a7 to your computer and use it in GitHub Desktop.
Save julian-stark/08af8559a691b0b8b39bf7c509bcf1a7 to your computer and use it in GitHub Desktop.
If you use Elementor Pro for the header, the Eicons font is used for the hamburger icon. This CSS code replaces it with Font Awesome icons.
/*
* Replace Eicons with FontAwesome
*/
.eicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.elementor-menu-toggle i:before {
content: "\f0c9";
}
.elementor-menu-toggle.elementor-active i:before {
content: "\f00d";
}
@presswerk
Copy link

worked for me: (added font-weight and right F-A 5 font-family

/*

  • Replace Eicons with FontAwesome
    */
    .eicon {
    display: inline-block;
    font: normal normal normal 14px/1 'Font Awesome\ 5 Free';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    .eicon-menu-bar {
    font-style: normal;
    }
    .elementor-menu-toggle i:before {
    content:"\f0c9";
    font-family:'Font Awesome\ 5 Free';
    font-weight:900;
    padding: 8px;
    }

.elementor-menu-toggle.elementor-active i:before {
content: "\f00d";
font-family: 'Font Awesome\ 5 Free';
font-weight:900;
}

@robomike
Copy link

Anyone know why when I disable Font Awesome via Php, then my uploaded SVGs disappear? I really want to remove the loading for fa-regular-400 , it just takes too long to load.

@mareklexuan
Copy link

Anyone know why when I disable Font Awesome via Php, then my uploaded SVGs disappear? I really want to remove the loading for fa-regular-400 , it just takes too long to load.

Font Awesome will deactivate if it's not used on the page, I just replaced all icons with SVG and worked fine. But some of the Elementor widgets use FA for their icons, like Search widget, so they load it anyway. But so far all widgets I had an issue with loaded only fa-solid


It seems like FA doesn't load in NavMenu if it is the only icon on the page. I have the same issue and if I add another FA icon on the page, my menu works fine.

elementor/elementor#9907

@nikkikrs
Copy link

nikkikrs commented Sep 29, 2020

Thank you @presswerk. Been searching for the answer for days. Great code and worked perfectly!

@SM-Fahim
Copy link

This blog helped to replace the icons with custom icons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment