How can I put WhatsApp number, Mail and location like this with icons?

Question

[my english is not that good, sorry] This picture I snapped from https://icms.edu.pk/ I want to know how can I put these whatsapp, mail-us and location like in this on my page. Can someone please help me out?

Firstly, I thought that these are images but they are not.

Answer 1

use icons and for phone number use tel:<-- phone number --> inside the anchor tag and for mail use mailto:<-- mail id --> inside the anchor tag or you can try the example mentioned below:

index.html

   <div class="header-contact">
      <div id="phone-details" class="widget-text">
        <i class="fa-brands fa-whatsapp"></i>
        <div class="info-text">
          <a href="tel:+92 333-9119145">
            <span>WhatsApp</span> +92 333-9119145
          </a>
        </div>
      </div>
    </div>

and here is style.css

.header-contact .widget-text {
  position: relative;
  padding-left: 55px;
}
.header-contact .widget-text i {
  position: absolute;
  border-radius: 2px;
  text-align: center;
  left: 0;
  line-height: 40px;
  color: #003e78;
  font-size: 35px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  font-weight: 700;
}
.header-contact .widget-text .info-text a {
  color: #505050;
  font-weight: 400;
  font-size: 16px;
}
a {
  color: #D6F8D6;
  transition: all 0.3s ease 0s;
  text-decoration: none !important;
  outline: none !important;
}
.header-contact .widget-text .info-text span {
  display: block;
  font-weight: 700;
  color: #101010;
  line-height: 18px;
}

and one more here I can use a fontawesome icons