Question 44925 in Html Question posted in
Some basic documentation can be found here.

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

[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.

Tags:

3

Answers


  1. 0

    They are using an icons library – http://www.flaticon.com

    Login or Signup to reply.
  2. 0

    Check this website https://fontawesome.com/

    Once you signup (it’s free), you will get a script like this:

    <script src="https://kit.fontawesome.com/e1861f2b78.js" crossorigin="anonymous"></script>

    Add this to your head tag.

    Then search for the font you need and get the link for the icon.

    You can customize it using CSS properties, check out the Font Awesome Howto if you need clarification.

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search