如果 Bootstrap 3 字形图标未包含在字形图标包中，我如何将其颜色更改为白色？

Question

我们的项目包含 Bootstrap 3 个字形。但是，字形下载包中没有解锁字形。您必须单独下载那个并单独包含它。因此，我很难让它表现得像其他字形一样。

下面是存储字形包的库文件和我有解锁字形的 /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;

}

有谁知道我做错了什么？是的，我知道还有另一个 Whosebug 问这个类似的问题，但它没有具体解决这个问题，它的解决方案对我不起作用。

编辑：已回答：

使用了这个解决方案：

<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 中的颜色，但不知道如何在这个 "insert code" 选项中执行此操作。即：

#unlock-all {
  color: #ffffff;
}

Answer 1

这可以使用 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 使其变黑，然后将其反转使其变白。

Answer 2

正如评论者所说，您无法使用 css 改变图像的颜色。

我倾向于从字形切换到（awsome）fontawsome，您可以在这里找到它：http://fontawesome.io

它的工作方式与 glyphicon 集大致相同，并且免费提供更多图标。

包含 fontawsone 文件后，这应该可以满足您的需求，该文件也可以在 CDN 上获得，也可以直接下载：

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

作为奖励，除了可以设置颜色 css，还有类可以得到不同的尺寸：http://fontawesome.io/icon/unlock/

希望对您有所帮助

如果 Bootstrap 3 字形图标未包含在字形图标包中，我如何将其颜色更改为白色？

How can I change the color of a Bootstrap 3 glyphicon to white if it's not included in the glyphicon package?

html

javascript

css

twitter-bootstrap

glyphicons