使用 css 过滤器将黑色图标更改为蓝色答案

【问题标题】：use css filters to change black icon to blue使用 css 过滤器将黑色图标更改为蓝色
【发布时间】：2018-09-01 06:17:07
【问题描述】：

我有一组黑色 png 图标。当用户将鼠标悬停在它们上方时，我希望图标变为蓝色。如何使用 css 将它们转换为蓝色？我尝试了 css 过滤器，但它并没有改变我的颜色。这是黑色图标

这就是我希望它在悬停时的样子

【问题讨论】：

stackoverflow.com/questions/29280817/…
另外，您可能想看看使用FontAwesome 或IcoMoon 之类的东西 - 您可以像更改字体颜色一样轻松更改它们的颜色：color: #3277BC;。

标签： css

【解决方案1】：

简答：无法使用 css 滤镜将图像特定部分的颜色从灰色更改为蓝色。

使用过滤器只有几个方面可用： https://developer.mozilla.org/en-US/docs/Web/CSS/filter

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

【讨论】：

【解决方案2】：

使用 FontAwesome！

使用此链接将样式表链接到 HTML 文档的头部。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

之后，您可以访问this链接以获取所有图标的参考。

要完成你想要的，你可以使用下面的代码。

.circle {
  height: 50px;
  width: 50px;
  background-color: #eff2f7;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
}

.icon {
  display: inline-block;
  position:relative;
  top: calc(50% - 8px);
}

.icon:hover {
  color: blue;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>
	<body>
		<div class="circle">
    <i class="fa fa-twitter icon"></i>
    </div>
	</body>
</html>

【讨论】：