Gradient Over Instagram Svg of Fontawesome 5

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>

How to add a color gradient to the instagram logo without affecting the visibility?

Using radial gradient and background-clip

Credits https://stackoverflow.com/a/49659118/8053274

.wrapper {

  justify-content: center;

  align-items: center;

}

.wrapper i {

  padding: 10px;

  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);

  transition: all ease-in-out 150ms;

}

.wrapper a:nth-child(1) {

  color: #3b5998

}

.wrapper a:nth-child(2) {

  color: #1DA1F2;

}

.wrapper a:nth-child(3) {

  color: black;

}

.wrapper i:hover {

  margin-top: -3px;

  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);

}

.fa-instagram {

  color: transparent;

  background: -webkit-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  background: -o-radial-gradient(30% 107%, circle, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);

  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%);

  background-clip: text;

  -webkit-background-clip: text;

}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="wrapper">

  <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>

  <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>

  <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a>

</div>

How do I use gradients with Font Awesome icons?

I stole my answer from the same question in the OP, and then tweaked it.

i.fab {

  font-size: 5rem;

  font-style: normal;

  font-family: fontawesome;

}

.fa-stack-overflow:before {

  color: transparent;

  position: relative;

  background-clip: text;

  -webkit-background-clip: text;

  background-image: linear-gradient(#F48024 20%, black);

}

<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>

Multiple font-awesome icons sharing a background gradient

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>

Instagram new logo css background

Here is the css code for background color:

.instagram{
  background: #f09433; 
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  }

<div class="instagram"></div>

How can I transition this font awesome (v5.0) color from white to my custom color?

Browsers started to support CSS transition of <color> values, so they do accept to make the transition between your CSS fill: <color> to an other fill: <color>.

But, when you are setting this CSS fill value to the gradient, for the engine, it's now an <urlFunc> value, which eventually resolves to an <image> value*. So transitioning from a <color> to this new value is not possible.

*^{Though I'm not sure about this assertion...}

---

One solution though would be to animate a CSS <filter> value:

.instagram-logo{

  padding: 2px 8px;

}

.instagram-logo svg.fa-instagram path{

  fill: url(#rg);

}

/* from black to color */

.instagram-logo svg.fa-instagram{

  filter: brightness(0%) grayscale(100%);

  transition: filter 2s ease, -webkit-filter 2s ease;

}

.instagram-logo svg.fa-instagram:hover{

  filter: brightness(100%) grayscale(0%);

}

/* from white to color */

.instagram-logo.white{

  background: black;

}

.instagram-logo.white svg.fa-instagram{

  filter: brightness(0%) grayscale(100%) invert(1);

}

.instagram-logo.white svg.fa-instagram:hover{

  /*

    we need to make a new declaration

    because transitions can only be done on func values 

    so we need the same <filterFunc> at both hands of the transition

 */

  filter: brightness(100%) grayscale(0%) invert(0);

}

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<div class="instagram-logo">

  <svg class="hidden" width="0" height="0" style="position:absolute; z-index:-1">

    <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>

  <i class="fab fa-instagram fa-2x"></i>

</div>

<div class="instagram-logo white">

  <i class="fab fa-instagram fa-2x"></i>

</div>

FontAwesome 5 - Multi color icon

By using gradient for the color and two icons we may achieve this but it remains a hacky way and you need to handle each case (icon + coloration) specifically:

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>

---

Related Topics