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