How to add an ICON IMAGE next to a Hyperlink?

Adding icons or images next to Hyperlinks indeed brands your links. The tutorial today will let you add an icon next to any link you want. I...

Adding icons or images next to Hyperlinks indeed brands your links. The tutorial today will let you add an icon next to any link you want. It is different from our previous post where I shared how can you add icons to hyperlinks using CSS3. Most of you requested that how can you add an icon next to just a simple URL with no file extension, so this post will answer all your questions.

Adding Icons Next To Hyperlinks in Blogger

1. Go To Blogger > Design>  Edit HTML

2. Check the "Expand Widget Templates" Box

3. Search for this,

]]></b:skin>

    4.  Just above it paste the code given below,

 

.mbt-hyperlink-1 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

Make these changes:

• Replace ADD ICON LINK HERE with the URL of your icon. You can use any of the icons below or all of them. Right Click on any icon and select "Copy Image Location" or "Copy Image URL"

 

 

You can also use icons of your preference and save the Images on blogger.

If you wish to use three or four icons simply keep on adding the same CSS code given above by changing only the digit number i.e. 1, 2 , 3 , 4 like this,

.mbt-hyperlink-1 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

.mbt-hyperlink-2 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

.mbt-hyperlink-3 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

.mbt-hyperlink-4 {
background: url(ADD ICON LINK HERE) no-repeat 0px 0px;
padding:7px 0 0 25px;
}

and so on..........

    5.  Save your template and jump to the next part of the tutorial

How it works?

Now for example if you wish to provide a link to your user to download an Ebook, you simply need to add the CSS class to the link i.e class="mbt-hyperlink-1"  as shown below,

<a  class="mbt-hyperlink-1" href="http://xyz.com">Download SEO Guide Tips</a>

After you paste the above link in the HTML mode of your blogger editor and publish the post, you will see the Icon appearing next to your link as shown below,

Hope this was clear. If you needed any help just let me know. Peace and blessings! :)