Q:

Hide text and display icons

in site we have like below text as in link1 : 

But instead of text - Black & Green , i want to display images as below or css icons as here....

i uploaded Black & Green images to below path : 
http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png
http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png
i am trying below css to display icons instead of text, but its not displaying any icons in site. I want to hide text with icons.
label[for=options_455_2]
   {
      width:50px; height:50px; background:#000; border-radius:50%;

   }

A:

You have to use display:block on label. So that empty label does not have zero width and height.
Secondly link you took the idea from is setting the background-color. but you are not. Either use different background-colors (like that link) or use background-image property.
Here's a working snippet.

label{
  width:50px;
  height:50px;
  border-radius:50%;
  background-image:url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png");
  background-size:cover;
  display:block;
  color:transparent;
}
<label>jdjshjkdhd</label>

