Buy me a coffee

Phone, Email icon to Header Social Icons

To add phone, email icon to Header Social Icons, you can follow these.
#1. Edit Site Header

Phone, Email Icon To Header Social Icons 1 Min

#2. Click to edit Social Icons

Phone, Email Icon To Header Social Icons 2 Min

#3. Click Add Social Link

Phone, Email Icon To Header Social Icons 3 Min

#4. Use this format to add Phone
tel:0123456789

Phone, Email Icon To Header Social Icons 4 Min

and this format to add Email
mailto:[email protected]

Phone, Email Icon To Header Social Icons 5 Min

We will have

Phone, Email Icon To Header Social Icons 6 Min

#5. Use this code into Code Injection > Header (If your plan doesn’t support Code Injection, you can add it via Code Block in Site Footer)

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

Phone, Email Icon To Header Social Icons 7 Min

#6. Use this code to Custom CSS box

header#header a[href*="tel"]:before {
    content: "\f095";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 20px;
}
header#header a[href*="mailto"]:before {
     content: "\f0e0";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 20px;
}
header#header a[href*="tel"] svg, header#header a[href*="mailto"] svg {
    display: none;
}

Phone, Email Icon To Header Social Icons 8 Min

#7. Result

Phone, Email Icon To Header Social Icons 9 Min