Buy me a coffee

Add Email – Phone Icons next to Header Button

Suppose you want to add an email and phone icon next to the Header button, like this.

Add Email Phone Icons Next To Header Button 04 Min

#1. Use this code to Code Injection – 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" />
  <ul class="t-social">
<li>
  <a href="mailto:[email protected]">
  <i class="fa-regular fa-envelope"></i>
  </a>
</li>
<li>
  <a href="tel:+441224356040">
  <i class="fa-solid fa-phone"></i>
  </a>
</li>
</ul>

Add Email Phone Icons To Burger Menu 01 Min

It will appear at the bottom of the site, like this

Add Email Phone Icons To Burger Menu 02 Min

#2. Use this code to Code Injection – Footer, under #1 code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('ul.t-social').insertBefore('.header-display-desktop a.btn');
})
</script>

Add Email Phone Icons Next To Header Button 01 Min

You will have

Add Email Phone Icons Next To Header Button 02 Min

#3. Use this code to Custom CSS box

ul.t-social {
    display: none;
    align-items: center;
    list-style: none;
}
header#header ul.t-social {
    display: flex;
}
ul.t-social li {
    margin-right: 1.5vw;
}
.header-display-desktop .header-actions--right .header-actions-action {
    display: flex;
}

Add Email Phone Icons Next To Header Button 03 Min

You will have

Add Email Phone Icons Next To Header Button 04 Min

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder