Question

我们的项目中包含Bootstrap 3 glyphicons。但是，glyphicon下载包没有解锁glyphicon。您必须单独下载它并单独包含它。因为这个，我很难让它像其他字形一样行事。

下面是存储glyphicons包的库文件和/ public / img文件夹，其中我有解锁glyphicon。

我已经尝试了一切我能想到的将这个图标变为白色。

  <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

这可以使用filter属性和一些技巧来完成：

＆＃13;

img {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

body {
  background-color: #000;
}

＆＃13;

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

＆＃13;

我们将图像的亮度设置为0，使其变为黑色，然后将其反转，使其变为白色。

Answer 2

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

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

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

一旦你包含了fontawsone文件，这可以做你想要的，也可以在CDN上直接下载：

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

作为奖励，除了设置colourwith css之外，还有不同大小的课程：http://fontawesome.io/icon/unlock/

希望这有帮助

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

2 个答案: