We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS Button with class icon

Nicola Siotto
on
Medium Priority
493 Views
Last Modified: 2012-05-11
I have developed a button but failed to display the icon as a class when displaying the background of the button, when not the icon displays.

Here's my style code:
#forum_options {
}
#forum_options a:link {
background: url("bckg_mainmenu_btn.png") repeat;
display:inline-block;
border:thin silver solid;
height:18px;
vertical-align:middle;
padding-top:4px;
padding-left:24px;
padding-right:5px;
margin-left:5px;
margin-right:1px;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
font-weight:bold;
color:silver;
text-decoration:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#forum_options a:visited {
  border:thin silver solid;
  color:silver;
}
#forum_options a:hover {
  border:thin white solid;
  color:white;
}
.icon_read{
background: url("read.png") no-repeat;
background-position:4px center;
}
.icon_rss{
background: url("rss.png") no-repeat;
background-position:4px center;
}

Open in new window


Here's the href:
<div id="forum_options">
 <a class="icon_read" href="#">Generic Button</a>
 <a class="icon_rss" href="#">RSS</a>
 </div>

Open in new window


And the test page live: http://dubaimanianet.ipage.com/temp/button_test.html
Whereas in the first line the problem with the style code up mentioned. And on the second line if I remove the background.

Question: how to keep the bckg and display the icon?

Thanks!
Comment
Watch Question

Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Nicola SiottoDirector

Author

Commented:
I knew the solution was in the span. I was eager to see if there was also an alternative but this solves my issue anyhow. Thanks!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.