1

I've been crawling the web for about 2 hours now, trying to find a solution. So I apologise, my starting code isn't overly helpful.

I've tried using background-clip, multiple.js, fill, and just can't get the effect I'm looking for.

In fact, I currently can't even replicate: https://stackoverflow.com/a/56916981 with Font Awesome 5 and the pesky SVGs.

Here's where I'm currently at:

body{
  font-size:150px;
}
svg {
background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
rgb(21, 198, 251)) 0% 0% / 300% 300%;
-webkit-text-fill-color: transparent;
animation: 2s ease 0s infinite normal none running fontgradient;
-webkit-animation: fontgradient 2s ease infinite;
-moz-animation: fontgradient 2s ease infinite;
animation: fontgradient 2s ease infinite;  
}

@-webkit-keyframes fontgradient {
0%{background-position:0% 92%}
50%{background-position:100% 9%}
100%{background-position:0% 92%}
}
@-moz-keyframes fontgradient {
0%{background-position:0% 92%}
50%{background-position:100% 9%}
100%{background-position:0% 92%}
}
@keyframes fontgradient { 
0%{background-position:0% 92%}
50%{background-position:100% 9%}
100%{background-position:0% 92%}
}
<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>
Even if the clipping above worked, it still wouldn't quite be the right effect. I want a single background (by that I mean it's positioning) to appear across all 3 icons, not 3 gradients with a position that's reset each time. And here's all I'm trying to achieve (Animation is simply a bonus): enter image description here
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Larm
  • 187
  • 12

3 Answers3

1

Well with the version that you are using, you will find the icons displayed as svg and the background-clip effect will not work.

You can use the older version where elements are rendered as content inside pseudo elements (:before), and set a parent for the i tags to get a single gradient across the icons:

body {
  font-size: 150px;
}

#parent {
  display: inline;
  background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242), rgb(21, 198, 251)) 0% 0% / 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: 2s ease 0s infinite normal none running fontgradient;
}

i { 
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
}

@-webkit-keyframes fontgradient {
  0% {
    background-position: 0% 92%
  }
  50% {
    background-position: 100% 9%
  }
  100% {
    background-position: 0% 92%
  }
}

@-moz-keyframes fontgradient {
  0% {
    background-position: 0% 92%
  }
  50% {
    background-position: 100% 9%
  }
  100% {
    background-position: 0% 92%
  }
}

@keyframes fontgradient {
  0% {
    background-position: 0% 92%
  }
  50% {
    background-position: 100% 9%
  }
  100% {
    background-position: 0% 92%
  }
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="parent">
  <i class="fab fa-stack-overflow"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-facebook-f"></i>
</div>
Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
  • Can this be done with 5.13? When I tried to switch out the stylesheet, the icons disappear (even though they still appear as an and not https://codepen.io/liambbarr/pen/LYVXoNa – Larm Mar 27 '20 at 01:43
  • @Larm try changing the display of those `` to inline – Rainbow Mar 27 '20 at 02:29
  • Thanks Zohir! Works perfectly - I had tried initially, but hadn't realised the fontawesome css was changing it back to inline-block – Larm Mar 27 '20 at 03:09
1

Don't use the SVG version and use the CSS one then consider background-position to shift the background for each icon to create a continuous one:

body {
  font-size: 100px;
}

i {
  float:left;
  background: 
     linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242), rgb(21, 198, 251)) 
     0 0 / 3em 100%;
  -webkit-background-clip:text;
  background-clip:text;
  width:1em;
  text-align:center;
  -webkit-text-fill-color: transparent;
  animation: fontgradient 2s ease infinite;
}
.fa-instagram {
  background-position:-1em 0;
}
.fa-facebook-f {
  background-position:-2em 0;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for this Temani! Is it possible to achieve the effect similar to Anurag's with 5.12? When I attempted to wrap this in a div, I was unsuccessful. I'm leaning towards their answer purely because it would allow for unlimited icons - where as your solution relies on their only being 3 – Larm Mar 27 '20 at 01:40
0

Here you go with a solution

body{
  font-size:150px;
}

i.fab {
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
  background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
  rgb(21, 198, 251)) 0% 0% / 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: 2s ease 0s infinite normal none running fontgradient;
  -webkit-animation: fontgradient 2s ease infinite;
  -moz-animation: fontgradient 2s ease infinite;
  animation: fontgradient 2s ease infinite;  
}
@-webkit-keyframes fontgradient {
  0%{background-position:0% 92%}
  50%{background-position:100% 9%}
  100%{background-position:0% 92%}
}
@-moz-keyframes fontgradient {
  0%{background-position:0% 92%}
  50%{background-position:100% 9%}
  100%{background-position:0% 92%}
}
@keyframes fontgradient { 
  0%{background-position:0% 92%}
  50%{background-position:100% 9%}
  100%{background-position:0% 92%}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>

Are you looking for this?

Shiladitya
  • 12,003
  • 15
  • 25
  • 38