Gradient over Instagram SVG of FontAwesome 5

Question

After upgrading to FontAwesome 5, I'm not able to color the svgs of FontAwesome.

This is my example: ⠀⠀⠀⠀⠀ https://codepen.io/shadrix/pen/GygdZr

Should be awesome if it worked like here: ⠀⠀⠀⠀⠀ https://codepen.io/immad-hamid/pen/jVNvQO (Note: he used FontAwesome 4).

Answer 1

Icons are no longer referenced as glyphs from a font, but injected as inline SVG. The content color of the icon is defined as fill="currentColor".

The technique with setting the background and using -webkit-background-clip no longer works. Instead you can set the color property directly. Unfortunately, that is where you get into a bit of trouble because color does not support gradients. You can set fill instead, if you use a SVG gradient definition:

body{
  background: black;
}
div {
  display:flex;
  justify-content:center;
  font-size:50px;
  color: white;
}

div:hover svg * {
  fill: url(#rg);
}

<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<svg width="0" height="0">
  <radialGradient id="rg" r="150%" cx="30%" cy="107%">
    <stop stop-color="#fdf497" offset="0" />
    <stop stop-color="#fdf497" offset="0.05" />
    <stop stop-color="#fd5949" offset="0.45" />
    <stop stop-color="#d6249f" offset="0.6" />
    <stop stop-color="#285AEB" offset="0.9" />
  </radialGradient>
</svg>
<div>
<i class="fab fa-instagram" aria-hidden="true"></i>
</div>

THe r attribute for the gradient cannot be expressed in the same terms as in CSS, so it's a bit of an estimate here.

Note the selector div:hover svg *. with that, it overwrites the attribute on the element. It needs to reference the styled element directly, if inheriting that style, fill="currentColor" would have the higher specificity.