如果不包含在glyphicon包中，如何将Bootstrap 3图形的颜色更改为白色？

Question

我们的项目中包含Bootstrap 3 glyphicons。但是，glyphicon下载软件包没有解锁图形。你必须单独下载并单独包含它。正因为如此，我很难让它像其他图形一样行事。

下面是储存图形包的库文件和我有解锁图形的/ public/img文件夹。

我用尽了一切我能想到的把这个图标白色。

<ul class="nav pull-right"> 
 
     <li> 
 
     <a id="unlock-all" href="#" title="Unlock All" > 
 
     <span class="glyphicon glyphicons-unlock icon-white" style="color:white;" > 
 
      <img src="/public/img/glyphicons-unlock.png" > 
 
     </span> 
 
     </a> 
 
     </li> 
 
</ul>

在我的CSS：

#unlock-all { 
 
    color: #ffffff; 
 

 
} 
 

 
.glyphicon.glyphicons-unlock.white { 
 
    color: #ffffff; 
 
} 
 

 

 
#unlock-all .glyphicon { 
 
    color: #ffffff; 
 

 
}

没有人知道我在做什么错？是的，我知道有另一个stackoverflow问这个类似的问题，但它没有专门解决这个问题，它的解决方案不适合我。

编辑：回答说：

使用此解决方案：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
    <li> 
 
     <a id="unlock-all" href="#" title="Unlock All" > 
 
     <i class="fa fa-unlock" aria-hidden="true" style="color: #ffffff; background-color:black;"></i> 
 
     </a> 
 
     </li>

，我实际上改变了颜色的CSS，但无法弄清楚如何做，在这个“插入代码“选项。即：

#unlock-all { 
    color: #ffffff; 
} 

Answer 1

正如评论者所说，你不能用css改变图像的颜色。

我倾向于从glyphicons切换到（棒极了）fontawsome，你可以在这里找到：http://fontawesome.io

它的工作原理，其方法为glyphicon集相同，有更多的图标是免费的。

这应该做你想做的，一旦你已经包含了fontawsone文件，也可在CDN的以及直接下载：

<i class="fa fa-unlock"></i> 

作为奖励，以及作为ALE设置colourwith CSS，也有类以获得不同的大小：http://fontawesome.io/icon/unlock/

希望这有助于

Answer 2

这可以通过使用filter财产和有点弄虚作假来完成：

img { 
 
    filter: brightness(0) invert(1); 
 
    -webkit-filter: brightness(0) invert(1); 
 
} 
 

 
body { 
 
    background-color: #000; 
 
}

<!-- This image is naturally black --> 
 
<img src="http://i.imgur.com/k66su2k.png">

我们设置图像的亮度为0，使得它的黑色，则反其道而行这使它变白。