[Share] How to replace Navigation text with FontAwesome Icon

You can use these steps to replace Navigation text with FontAwesome Icon.

If it doesn't work, you can share site url + code you added, I can check problem easier.

#0. Suppose we have 2 text: Book Now, Phone.

You can follow these to replace both with custom icon (we will use FontAwesome Icons)

#1. Use this code to Code Injection > Footer (If your site is Plan and doesn’t support Code Injection, you can edit Site Footer > Add a Code Block > Paste same code)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

#2. Use this code to Custom CSS box

div.header-nav-item:nth-child(2)>a, div.header-nav-item:nth-child(3)>a {
    font-size: 0;
}
div.header-nav-item:nth-child(3)>a:before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 16px;
}
div.header-nav-item:nth-child(2)>a:before {
    content: "\f075";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 16px;
}

#3. Result

#4. Note

#5. With mobile, use this code

/* Mobile icon */
.header-menu-nav-wrapper>div:nth-child(2)>a, .header-menu-nav-wrapper>div:nth-child(3)>a {
    font-size: 0;
}
.header-menu-nav-wrapper>div:nth-child(2)>a:before {
     content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 16px;
}
.header-menu-nav-wrapper>div:nth-child(3)>a:before {
     content: "\f075";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 16px;
}