Adding phone and mail icons to a custom theme header: How to?

[HcomfortsDoh]

Hi,

I’m currently looking at how to add a phone icon next to the phone number on my shopify store

I’m also looking at how to add a mail Icon as well as a clickable link for my mailing address to appear under my header.

I’m using a custom theme.

store is https://housecomforts.co.uk

[BSS-Commerce]

Hi @HcomfortsDoh ,

You can do this way:

1. Go to edit code:

2. Find the phone number display:

fontawsome: https://fontawesome.com/search

Sample code:

<a href="https://dev-nam-td-store.myshopify.com/pages/contact" class="store-header">
  <div class="header-icons">               
      <i class="fas fa-regular fa-phone"></i> 
    <span class="hidden-pocket hidden-lap">03 XXXX XXXX</span>
  </div> 
</a>S 

You will get the result like that:

3, Edit the css according to the class name:

Sample code:

.header-icons{
  display: flex; // for my icon and phone number are on the same line
}
.fa-regular.fa-phone{
  font-size: 26px; // fix size for icon
  margin: 0 14px; // distance between components
  color: white;  // icon color
}

And then, you will get the result like that:

I hope you will find it helpful!

[HcomfortsDoh]

Hi, thank you so much for your response. I’m having trouble trying to find out where to find & add these on my header.liquid file? I have tried at the top and it just gave me white bar underneath my orange announcement bar. I couldn’t seem to find similar code on there on the place where to add this.

<a href="https://dev-nam-td-store.myshopify.com/pages/contact" class="store-header">
  <div class="header-icons">               
      <i class="fas fa-regular fa-phone"></i> 
    <span class="hidden-pocket hidden-lap">03 XXXX XXXX</span>
  </div> 
</a>S

[HcomfortsDoh]

Could this be where I need to add or replace the code?