Align hyperlink text with sprite image

I have the following code:

<a  accesskey="b" class="icon icon-foo" href="/aa">this开发者_如何学Python is a test</a>

CSS Code:

a {float: none;padding: 0 0 0 23px;}

.icon { display: block; overflow: hidden; background-repeat: no-repeat; width: 32px; height: 32px; background-image: url(http://www.burconsult.com/wp-content/uploads/2010/05/google_sprites_2.jpg); }

.icon-foo { background-position: 0 -35px; }

Code on JS fiddle http://jsfiddle.net/RD2Ph/ . I want the text to come to the right side of the image. i.e <image(blogger one)><my anchor text> But right now the it is not happening with the above code. When I play with the above code either the image gets shifted or the text is shifted. Can you help me solve this?

You've over-simplified it, need a bit more html as well.

http://jsfiddle.net/RD2Ph/11/

<a  accesskey="b" class="icon-with-text"  href="/aa">
    <span class="icon icon-foo this-icon"></span>
    <span class="text">this is a test</span>
</a>

.icon { display: block; background-repeat: no-repeat; width: 33px; height: 33px; background-image: url(http://www.burconsult.com/wp-content/uploads/2010/05/google_sprites_2.jpg); }    
.icon-foo { background-position: -21px -36px; }


a.icon-with-text { line-height: 33px;}
span.this-icon {float:left;}  
span.text {float: left; margin-left: 5px;} 

http://jsfiddle.net/RD2Ph/2/

Get rid of overflow: hidden so the text shows up outside of the box bounds. Wrap it in a span so you can get at the text itself. display: block; and move it to the right with relative positioning.

Update: Probably something more like this http://jsfiddle.net/RD2Ph/9/