Jump to content

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

Recommended Posts

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?

Screenshot 2024-05-06 at 3.25.20 PM.png

Link to comment
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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

image.png.bf7ab78127f8d81245fbc02587edc549.png

image.png.6f3ff3bce928747f3a42d8217e423cbb.png

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

image.png.e3bf87858b9654fabec5898eb768ea42.png

#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;
}

image.png.57fb58b479d27fb24632af4dd2bc6cbd.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

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

header-replace-button-with-mail-icon-mobile-04-min

image.png.d7e8b3ce8aa18b16f8fe2fe80d0fb0e9.png

 

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

image.thumb.png.3027f5c60b6b6d846471c78fa1c30125.png

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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.