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.

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

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

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

You will have

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

You will have