CODEWITHSUNDEEP
htmlcss
Hooman Bahreini
Hooman Bahreini

Reputation: 15579

How to include a clickable image behind a link

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.sstatic.net/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.sstatic.net/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

Upvotes: 0

Views: 86

Answers (3)

Temani Afif
Temani Afif

Reputation: 273990

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.sstatic.net/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.sstatic.net/KmcEa.png' alt='email' width='20' style='float:left;margin-right:10px;'>
  0800 123 456 789
  </a>
</div>

Upvotes: 1

ROOT
ROOT

Reputation: 11622

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

a {
  background: url(https://i.sstatic.net/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>

Upvotes: 4

FFinn
FFinn

Reputation: 2825

You may use onclick event for image. Checkout here.

Upvotes: -4

Related Questions