アイコンにダイヤル機能を与える方法

Question

番号をクリックするか、携帯電話でダイヤルしようとしているダイヤルアイコンをクリックするときは、いつでも実行する必要があります。

私はダイヤルしようとしている番号をクリックするたびに行っていますが、私はアイコンに同じものを与える方法はありません。あなたはaタグのアイコンをラップする必要が

.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

以下を参照：

<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

ジャストリンク（<a>タグ）にイメージを包みます。

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

はここで完全なコードです：問題を解決するのdivの周り<a>タグを入れて述べてきたように

.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

。

しかし、私はそれを見ている間、私はそれを少し動かして、flexboxに紹介しました。これはスタイリングに非常に役立ちます。

スタイルをインライン化するのではなく、CSSファイルを作成することが常にベストです。 （あなただけのスタイルを繰り返しても、一度それがそうであるように）ただ、すべての破線の領域を横切って、あなたの ``タグを配置

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