Change color of a background image (png)

Question

I have the following CSS selector on my website to add an icon for external links to every href that is not pointing to my own domain (https://stackoverflow.com/a/55891382/257617):

a[class=" external-link"]::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    position: relative;
    top: -3px;
    margin: 0 3px 0 5px;
}

This is a grey image but the rest of the link has #0273d4 as a color. Is it possible to color that image as well (but not the whole a href background text)?

I agree with Temani Afif, use the filter property. Start with adding `img{hue-rotate(90deg);}` to your CSS file, and adjust the degree value (0-360) of the color shift to your liking. — Christopher Bennett, Apr 28 '19 at 22:22

score -1 · Answer 1 · answered Apr 29 '19 at 00:58

You could use something link Font Awesome which will allow you to customise the look of the icon like it was text.

.blue {
  color: #0273d4
}

.red {
  color: red
}

.green {
  color: green
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<ul>
  <li><a class="blue" href="#">External Link <i class="fas fa-external-link-alt"></i></a></li>
  <li><a class="red" href="#">External Link <i class="fas fa-external-link-alt"></i></a></li>
  <li><a class="green" href="#">External Link <i class="fas fa-external-link-alt"></i></a></li>
</ul>

You can find how to start working with Font Awesome in your project here.

Otherwise you could use the filter property as Temani Afif mentioned. His Link. Further Reading

Change color of a background image (png)

1 Answers1