如何在左侧对齐的按钮中添加图标，并将其设置为黑色或白色？ [英] how to add icon in button that's aligned to the left and make it either black or white?

问题描述

 < style> 
 span.icon {
 background：url（lock.png）no-repeat; 
 float：left; 
 width：40px; 
 height：40px; 
} 
< / style> 
 
< input type =submitid =submitvalue =Log Me In/>< span class =icon> 
  

所以图标不会显示。我有图标，但它不起作用。我试图给文件名添加引号，但仍然没有运气。 由于图标是图像文件而不是字体，你不能用CSS改变它的颜色。

  input {
 background：green url（ http://placehold.it/50/ffffff）10px center no-repeat; 
} 
 input：hover {
 background-image：url（http://placehold.it/50/000000）; 
} 
  

http://jsfiddle.net/daCrosby/tvNCa/2/

您也可以考虑像这样的 CSS Sprites 。

 <style> 
span.icon {
 background: url(lock.png) no-repeat;
 float: left; 
width: 40px;
 height: 40px; 
} 
</style> 

<input type="submit" id="submit" value="Log Me In"/><span class="icon">

So the icon won't show. I've got the icon but it's not working. I tried to add quotes to the file name but still no luck.

解决方案

Since the icon is an image file and not a font, you can't change its color with CSS. You can, however, swap out the image for a properly colored version.

input{
    background:green url("http://placehold.it/50/ffffff") 10px center no-repeat;
}
input:hover{
    background-image: url("http://placehold.it/50/000000");
}

http://jsfiddle.net/daCrosby/tvNCa/2/

You may also want to look into CSS Sprites for things like this.

这篇关于如何在左侧对齐的按钮中添加图标，并将其设置为黑色或白色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！