隐藏文本和显示图标

Question

在网站中我们喜欢link1下面的文字：

但是，我希望将图片显示为here ....

我上传了Black＆amp;绿色图像到下面的路径：

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

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

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

Black & Green

Answer 1

您必须在标签上使用display:block。因此空标签的宽度和高度不为零。

其次，你接受了这个想法是设置background-color。但你不是。使用不同的背景颜色（如该链接）或使用background-image属性。

这是一个工作片段。

＆＃13;

＆＃13;

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;
}

＆＃13;

<label>jdjshjkdhd</label>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你对html没有影响我可以给你一个hack :)）

label {
color: #fff;
width: 0px;
}

label::before {
display: block;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;

}

这是codepen http://codepen.io/kejt/pen/EZZGeE

Answer 3

此解决方法可以帮助您满足您的要求。根据值更改背景颜色。

label[for=options_453_2]{position:relative;border-radius:50% !important;max-width: 20px !important;}
label[for=options_453_2]:before{background: #000 !important;display:block;content: "";position: absolute;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;}