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.

Answer 2

I was able to make it work following this answer to came up with the solution. The key is to use the mask feature in FontAwesome. For instance, in VueJs, for the instagram icon, we can use next code:

<font-awesome-icon :icon="['fab', 'instagram-square']" :class="icon" :mask="['fas', 'square-full']" />

.icon {
    color: white;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

All credits go for user sylvainDNS of the related comment.

Answer 3

use like this

i.fab {
    background: linear-gradient(to right, #8490ff 0%, #62bdfc 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}