Adding Font Awesome icons to Elementor menus

This quick guide will show you how to add your own Font Awesome icons to your Elementor menus.

1. Add a CSS class to your menu item

  1. From the Appearance > Menus page, click Screen Options in the top right and tick the CSS Classes checkbox.
  2. Click the arrow on the menu item you are working on and add a custom class to the CSS Classes (optional) field. Something unique like “my-custom-icon”.
  3. Save the menu.

2. Add custom CSS to your Elementor Nav Menu

  1. Open Elementor and navigate to the Nav Menu Widget you are working with.
  2. Open the Advanced tab, scroll down to Custom CSS and expand this panel.
  3. Add the following custom CSS.

Note: You can change the commented values to match your styling.


selector .my-custom-icon a {
display: flex;
align-items: center;
flex-direction: row-reverse;
}

selector .my-custom-icon a::before {
position: relative;
content: "\f2bd"; /* The unicode value of the Font Awesome icon you'd like to use */
display: inline;
color: white; /* The icon colour */
opacity: 1 !important;
font-family: "Font Awesome 5 Pro"; /* Change this to "Free" if you don't have a Pro license */
font-weight: 300; /* Choose the font weight, 900 - solid, 400 - regular, 300 - light */
font-size: 1.5rem; /* The size of your icon */
background-color: transparent !important;
margin-left: 8px; /* The left margin */
height: auto;
}

selector .my-custom-icon a:hover::before,
selector .my-custom-icon a:focus::before {
color: #292A2C; /* The colour of the icon when you hover over the link */
}