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-font-awesome-in-elementor-templates.css

/*
 * 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";
}

PHP to remove the font: https://gist.github.com/julian-stark/e4d6bfc7a7b5d804255607da77e52553

Font Awesome content values: http://astronautweb.co/snippet/font-awesome/

How about replacing the menu icon with a custom icon, if one wants to disable both Font Awesome and icons?

It's showing blank icon

Same problem here. Please can you review your code? Thanks a lot!

Same problem here. Please can you review your code? Thanks a lot!

Try this - https://gist.github.com/wpfyorg/c7821be7f951258e09f1f6b731a54ab9

https://stackoverflow.com/questions/47788847/fontawesome-5-font-family-not-work/47789198

How about replacing the menu icon with a custom icon, if one wants to disable both Font Awesome and icons?

Did you ever find a solution to this? I also disabled these and looking to add the icon via CSS. I found the following code, but don't know how to modify it so that it works in an Element's custom css:

.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.8em;
margin-right: 0.3em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
}

.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.2em solid #fff;
}

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;
}

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.

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

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

This blog helped to replace the icons with custom icons.