Buy me a coffee

Add Phone, Email icon to Navigation Bar

#1. First, you add 2 Link Items to the Navigation with the Name/URL

  • Phone – #phone
  • Email – #email

Add Phone Email Icon To Navigation Bar 01 Min

Add Phone Email Icon To Navigation Bar 02 Min

#2. Use this code to Code Injection – Header (or use Code Block in Site Footer if your plan doesn’t support Code Injection)

<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" />

Home Icon 02 Min

#3. Use this code to Custom CSS box

/* Email */
header#header a[href="#email"] {
    font-size: 0;
}
header#header a[href="#email"]:before {
    content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 18px;
}
/* Phone */
header#header a[href="#phone"] {
    font-size: 0;
}
header#header a[href="#phone"]:before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 18px;
}

Add Phone Email Icon To Navigation Bar 03 Min