use css filters to change black icon to blue

Question

I have a set of black png icons. When a user hover over them, I want the icons to become blue. How can I convert them to blue using css? I tried css filters but its not changing colors for me. Here is the black icon

and here is how I want it to be on hover

https://stackoverflow.com/questions/29280817/is-there-any-way-to-colorize-a-white-png-image-with-css-only — dokgu, Mar 22 '18 at 17:44
Also you might want to take a look at using something like [FontAwesome](https://fontawesome.com/) or [IcoMoon](https://icomoon.io/) - you can easily change their colors like changing a font color: `color: #3277BC;`. — dokgu, Mar 22 '18 at 17:48
Does this answer your question? [Change color of PNG image via CSS?](https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css) — Jespertheend, Nov 01 '22 at 13:21

score 1 · Accepted Answer · answered Mar 22 '18 at 17:39

Short answer: Is not possible to change the color from grey to blue for a specific part of your image using css filter.

Only few aspects are available using filter: 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%);

score 1 · Answer 2 · answered Mar 22 '18 at 20:46

Use FontAwesome!

Link the stylesheet in the head of your HTML document using this link.

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

After that, you can visit this link for a reference of all icons.

To accomplish what you want you can use the code below.

.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>

use css filters to change black icon to blue

2 Answers2