如果不包含在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，使得它的黑色，則反其道而行這使它變白。