Изменить цвет фонового изображения (png)

Question

У меня на сайте есть следующий селектор CSS, чтобы добавить значок для внешних ссылок на каждый раздел, который не указывает на мой собственный домен (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;
}

Это серое изображение, ноостальная часть ссылки имеет цвет # 0273d4. Возможно ли также закрасить это изображение (но не весь текст фона href)?

Answer 1

Вы можете использовать ссылку Font Awesome, которая позволит вам настроить внешний вид значка, как будто это текст.

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

Вы можете найти, как начать работать с Font Awesome в вашем проекте здесь .

В противном случае вы можете использовать свойство фильтра, как упомянул Temani Afif. Его ссылка . Дальнейшее чтение