How to add an ICON or an IMAGE next to a Hyperlink?

antony · 09-28-2013 -

I see all the time a small image next to hyperlink so I would like to know how to do it?

Code:

<a href="URL">Anchor Link Text</a>

Find

Reply

invisibe_dude · 09-28-2013 -

Add this code to your .css file

Code:

.hyperlink-image {

background: url(Replace this with your Image Url) no-repeat 0px 0px;

padding:5px 0 0 15px;

}

Use this code

Code:

<a class="hyperlink-image" href="URL">Anchor Link Text</a>

Find

Reply

chod · 09-29-2013 -

Float would be a much better option here

html

Code:

<img src="imageURL.png" width="24px" height="19px">

<a href="#" class="follow"> Follow Me</a>

CSS

Code:

img { float: left; }

.follow { line-height: 19px; }

www.AdminEmpire.com
www.BlimptonTech.com - Best Free Online JavaScript tool to minify JavaScript files.

Find

Reply

invisibe_dude · 01-18-2014 -

Well yes it's much easier to just add float: left; but if you want more control over the image tag then it's best to use padding or margin

Find

Reply