Как добавить интерактивное изображение за ссылкой

Question

Я хочу вставить изображение за ссылкой таким образом, чтобы оно было интерактивным ... Кажется, я не понимаю:

This looks right but the phone icon is not clickable
<div style='margin-top: 4px;' class="-phoneNumberDisplayClass-">
  <img src='https://i.stack.imgur.com/KmcEa.png' alt='email' width='20' style='vertical-align: middle; padding-right: 5px;'>
  <a rel='nofollow' href='tel:0800123456789'>0800 123 456 789</a>
</div>

<br/>

Phone icon is clickable, but the line under phone number is extended towards left
<div>
  <a rel='nofollow' href='tel:0800123456789'>
  <img src='https://i.stack.imgur.com/KmcEa.png' alt='email' width='20' style='vertical-align: middle; padding-right: 5px;'>
  0800 123 456 789
  </a>
</div>

PS. это для шаблона электронного письма

Answer 1

если есть возможность использовать изображение в качестве фона, то вот фрагмент, использующий атрибут фона:

a {
  background: url(https://i.stack.imgur.com/KmcEa.png) #fff no-repeat left center;
  background-size: 18px 18px;
  display: inline-block;
  padding-left: 25px;
}

<div style='margin-top: 4px;' class="-phoneNumberDisplayClass-">
  
  <a rel='nofollow' href='tel:0800123456789'>0800 123 456 789</a>
</div>

<br/>


<div>
  <a rel='nofollow' href='tel:0800123456789'>
  0800 123 456 789
  </a>
</div>

Answer 2

Если вас беспокоит только маленькая линия, используйте для изображения float:

This looks right but the phone icon is not clickable
<div style='margin-top: 4px;' class="-phoneNumberDisplayClass-">
  <img src='https://i.stack.imgur.com/KmcEa.png' alt='email' width='20' style='vertical-align: middle; padding-right: 5px;'>
  <a rel='nofollow' href='tel:0800123456789'>0800 123 456 789</a>
</div>

<br/>

Phone icon is clickable, but the line under phone number is extended toward left
<div>
  <a rel='nofollow' href='tel:0800123456789'>
  <img src='https://i.stack.imgur.com/KmcEa.png' alt='email' width='20' style='float:left;margin-right:10px;'>
  0800 123 456 789
  </a>
</div>

Answer 3

Вы можете использовать onclick событие для изображения. Оформить заказ здесь .