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

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

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

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

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