Solution 1 :

if its an option to have the image as a background, then here is a snippet using background attribute:

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>

Solution 2 :

If the small line is the only thing bothering you, use float for the image:

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>

Solution 3 :

You may use onclick event for image. Checkout here.

Problem :

I want to insert an image behind the link, in such a way that it is clickable… I don’t seem to be getting it right:

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. this is for an email template

Comments

Comment posted by Hooman Bahreini

Perfect, this is exactly what I was looking for.

Comment posted by ROOT

Glad to help 🙂

Comment posted by Hooman Bahreini

Thanks a lot, this is also a great solution.

By

Leave a Reply

Your email address will not be published. Required fields are marked *