Gradient over Instagram SVG of FontAwesome 5
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.