Is it possible to add email and phone icons to the header?

I'd love to include email and phone icons along with the social icons in the header. I see that it's possible to add such icons/links in text blocks, but would it be possible to include them here?

You can add 2 Navigation items with name: Phone - Email, then we can use CSS code to turn it to phone, email icon.

(You can share site url, we can check code easier)

www.sunnieleestudio.com

When you say Navigation items, do you mean pages or elements?

16 hours ago, sun_ said:

www.sunnieleestudio.com

When you say Navigation items, do you mean pages or elements?

Navigation item, similar About, Contact Item, but when you click Plus (+) to add page, choose LINK (or URL), instead of Page.

On 5/7/2024 at 11:16 PM, sun_ said:

www.sunnieleestudio.com

When you say Navigation items, do you mean pages or elements?

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

• Phone - #phone
• Email - #email

#2. Use this code to Website > Website Tools > 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" />

#3. Use this code to Website Tools > Custom CSS

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

Amazing, thank you again! Is there by any chance an icon that's a smart phone vs the old school receiver?

And, are there any coded social icons (Instagram, Pinterest?) Now I'm wanting to do all four so they line up.

With email, you can use these styles (or if you have an email icon file, you can send, it will add to code)

With Phone, you can use these styles (click on each icon >>> look at top right of box)

https://fontawesome.com/search?q=phone&o=r&m=free

You can add email/phone, I will give another code to equal space of 4 icons, current I don't see email/phone icons on your site.