Additional Whatsapp Number

[murdoc_tcc]

Hi Everyone. trying to add an additional number on the top of my NavBar As per image. 

What I want to know why is my Whatapp FA Icon a block, why is it not converting to the WhatsApp Bubble. I need help it is frustrating. 

This is the Code I am Using. 

Header.tpl
 

<div class="whatsapp-top-nav">
    <a href="https://wa.me/1234567890" target="_blank" title="WhatsApp Us">
        <i class="fa fa-whatsapp"></i>
        <span>+123 456 7890</span>
    </a>
</div>

Custom.CSS
 

.whatsapp-top-nav {
    display: flex;
    align-items: center;
    margin-left: 1rem; /* Adjust spacing as needed */
    font-size: 1rem;
}
.whatsapp-top-nav a {
    color: #fff; /* Match your navbar text color */
    display: flex;
    align-items: center;
    text-decoration: none;
}
.whatsapp-top-nav .fa-whatsapp {
    font-size: 1.2em;
    margin-right: 0.5rem;
    color: #25D366; /* Official WhatsApp green */
}

and Head.tpl

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

 

[ComGrafPL]

Have you tried this instead: <i class="fa-brands fa-whatsapp"></i>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

 

[murdoc_tcc]

38 minutes ago, ComGrafPL said:

Have you tried this instead: <i class="fa-brands fa-whatsapp"></i>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

 

Thank you that worked, thanks so much

[ComGrafPL]

4 minutes ago, murdoc_tcc said:

Thank you that worked, thanks so much

Mark topic as solved. Enjoy your day.