Wie Dial-Funktionalität auf das Symbol geben

Question

Ich muss tun, wenn Sie auf Nummer oder wählen Symbol klicken, es wird in unserem Handy einwählen.

Ich habe getan, wenn Sie auf Nummer klicken, die es zu wählen ist, aber ich nicht, wie man dasselbe für das Symbol gibt.

.contact-list { 
 
\t background: #fff; 
 
\t background-size: 30px; 
 
\t padding-left: 10px; 
 
\t padding-top: 10px; // 
 
\t padding-bottom: 7px; 
 
\t border-bottom: 1px dashed #999; 
 
}

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

Answer 1

Sie müssen sehen, das Symbol in einem a Tag wickeln unter:

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

Answer 2

einfach das Bild in einen Link wickeln (<a>-Tag).

<a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588"> 
    <img src="https://image.freepik.com/free-icon/phone-call_318-62608.png" alt="974-4433665588" class="phone-image"/> 
</a> 

ist die komplette Code:

.contact-list { 
 
    background: #fff; 
 
    background-size: 30px; 
 
    padding-left: 10px; 
 
    padding-top: 10px; // 
 
    padding-bottom: 7px; 
 
    border-bottom: 1px dashed #999; 
 
} 
 
.phone-label { 
 
    color: #333946; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
} 
 
.phone-image { 
 
    width: 28px; 
 
    float: right; 
 
    margin-top: -5px !important; 
 
    margin-right: 13px; 
 
}

<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" class="phone-label">974-4433665588</a> 
 
    </span> 
 
    <span> 
 
     <a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588"> 
 
     <img src="https://image.freepik.com/free-icon/phone-call_318-62608.png" alt="974-4433665588" class="phone-image"/> 
 
     </a> 
 
    </span> 
 
    </p> 
 
</div>

Answer 3

Wie die <a> Tags angegeben wurde Putting um das div wird das Problem lösen.

Aber während ich es betrachtete, dachte ich, ich würde es ein wenig bewegen und Ihnen flexbox vorstellen, was sehr hilfreich für das Styling ist.

Es ist immer am besten, eine CSS-Datei zu haben, anstatt Styles inline zu machen. es sieht sauberere und es ist einfacher zu ändern (wie Sie es gerade tun, wenn auch wenn der Stil wiederholt wird)

.phone-link { 
 
    text-decoration: none; 
 
} 
 
.contact-list { 
 
    background: #fff; 
 
    background-size: 30px; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 7px; 
 
    border-bottom: 1px dashed #999; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.phone-no h2 { 
 
    color: #000; 
 
} 
 
.phone-no { 
 
    color: #333946; 
 
    font-weight: 400; 
 
} 
 
.phone-icon { 
 
    margin: 13px; 
 
} 
 
.filler { 
 
    flex: 1; 
 
}

<a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588" class="phone-link"> 
 
    <div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588"> 
 
    <span class="phone-no"> 
 
     <h2>Fire</h2> 
 
     974-4433665588 
 
    </span> 
 
    <span class="filler"></span> 
 
    <span class="phone-icon"> 
 
     <img src="http://www.toyotaoftricities.com/assets/d1123/img/phone_icon.png" alt="974-4433665588" /> 
 
    </span> 
 
    </div> 
 
</a> 
 
<a data-rel="external" data-tel="974-1223344556" href="tel:974-1223344556" class="phone-link"> 
 
    <div class="contact-list" data-tel="974-1223344556" href="tel:974-1223344556"> 
 
    <span class="phone-no"> 
 
     <h2>Police</h2> 
 
     974-1223344556 
 
    </span> 
 
    <span class="filler"></span> 
 
    <span class="phone-icon"> 
 
     <img src="http://www.toyotaoftricities.com/assets/d1123/img/phone_icon.png" alt="974-4433665588" /> 
 
    </span> 
 
    </div> 
 
</a>