隐藏文字和显示图标 [英] Hide text and display icons

问题描述

在网站中，我们在

但不是文字 - Black&绿色，我要显示图像如下或 css图标作为

我上传了Black&绿色图片到以下路径：

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

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

我试图在css下面显示图标而不是文字，但它不会在网站上显示任何图标。

 标签[for = options_455_2] 
 { 
 width：50px; height：50px;背景：＃000; border-radius：50％; 
 
} 
  

解决方案

在标签上使用 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;显示：block; color：transparent;}  

 < label> jdjshjkdhd< / label>  

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

   }

解决方案

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>

这篇关于隐藏文字和显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！