css - 隐藏文本和显示图标

Question

在站点中，我们有如下文本，如 link1 :

但不是文本 - Black & Green ，我想显示 images 如下或 css icons here ....

我将黑白图片上传到以下路径:

http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png

http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png

我正在尝试在 css 下显示图标而不是文本，但它不在站点中显示任何图标。我想用图标隐藏文本。

label[for=options_455_2]
   {
      width:50px; height:50px; background:#000; border-radius:50%;

   }

Answer 1

你必须在标签上使用display:block。这样空标签的宽度和高度就不会为零。

第二个链接是您获取灵感的地方，它是设置 background-color。但你不是。使用不同的背景颜色(如该链接)或使用 background-image 属性。

这是一个工作片段。

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>