Overwrite FontAwesome Icon

by Vladimir

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<p>
<i class="fas fa-pen-square"></i> - FontAwesome Icon
</p>
<p class="changed">
<i class="fas fa-pen-square"></i> - Changed Icon
</p>

CSS

body {
  background: #000;
  color: #ddffdd;
  font-size: 32px;
}
.changed .fa-pen-square {
  background: url('https://svp.icu/placeholder/32x32.png') no-repeat;
  display: inline-block;
  width: 32px;
  height: 32px;
}
.changed .fa-pen-square::before {
  content: "";
}