htmlcssdialing

How to give dial functionality to the icon

I need to do whenever click on number or dial icon it's going to dialing in our mobile.

I have done whenever click on number it's going to dial, but I don't no how to give same for the icon.

.contact-list {
	background: #fff;
	background-size: 30px;
	padding-left: 10px;
	padding-top: 10px; //
	padding-bottom: 7px;
	border-bottom: 1px dashed #999;
}
<div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588">
		<h2>Fire</h2>
		<p>
			<span><a data-rel="external"
				data-tel="974-4433665588" href="tel:974-4433665588"
				style="color: #333946; text-decoration: none; font-weight: normal;">974-4433665588</a></span>
			<span><img src="img/contact.png" alt="974-4433665588" style="width: 28px;float: right;margin-top: -19px !important;margin-right: 13px;" /></span>
		</p>
	</div>

enter image description here

Solution

  • You need to wrap the icon in an a tag see below:

        <div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588">
            <h2>Fire</h2>
            <p>
                <span><a data-rel="external"
                    data-tel="974-4433665588" href="tel:974-4433665588"
                    style="color: #333946; text-decoration: none; font-weight: normal;">974-4433665588</a></span>
                <span><a href="tel:974-4433665588">
<img src="img/contact.png" alt="974-4433665588" style="width: 28px;float: right;margin-top: -19px !important;margin-right: 13px;" /></a></span>
            </p>
        </div>