CODEWITHSUNDEEP
htmlcssicons
RaShe
RaShe

Reputation: 1880

How to align a link icon after the text via CSS?

I have a navigation menu with links, before the text link I have an icon, I would like to put this icon after the text link. The website is here http://www.labella.co.il/.

CSS of the link: 

.sidebar ul.menu li a {background: url("1-default/bullet.png") no-repeat scroll 0 12px transparent;}

Icon image is in url("1-default/bullet.png").

Upvotes: 1

Views: 4069

Answers (3)

Zoltan Toth
Zoltan Toth

Reputation: 47667

Change the position of the background image and add some padding so the text won't cover it:

.sidebar ul.menu li a {
    background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
}

.sidebar ul.menu li a {
    cursor: pointer;
    text-decoration: none;
    padding: 10px 23px 10px 22px;
    display: block;
    background: #CCC;
}

Upvotes: 2

joshnh
joshnh

Reputation: 8704

Here is the changed code to get what you are after:

.sidebar ul.menu li a {
    background: url("1-default/bullet.png") no-repeat scroll 100% 12px transparent;
    padding: 10px 22px 10px 0;
}

I am swapping the left padding to the right, and pushing the background image across to the right hand side.

Note that I have used 100% as opposed to a 'magic number' (like the other answers). This means that even if the width changes, the icons will still line up, with no maintenance required!

Upvotes: 4

greener
greener

Reputation: 5069

background-position could be changed like:

.sidebar ul.menu li a {
  background: url("1-default/bullet.png") no-repeat scroll 202px 12px transparent;
}

and then padding adjusted to make room for the icon:

.sidebar ul.menu li a {
   cursor: pointer;
   text-decoration: none;
   padding: 10px 22px 10px 0;
   display: block;
   background: #CCC;
}

Upvotes: 1

Related Questions