Is there any way to create a gradient effect on a "fa-Circle" from Font Awesome?

Question

I have that code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>

<li id="link-instagram" class="list-inline-item">
  <a href="#">
    <span class="fa-stack fa-lg">
      <i class="fas fa-circle fa-stack-2x"></i>
      <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
    </span>
  </a>
</li>

and wanted to add a gradient in the Instagram circle but I can not at all.

If anyone could help, I’d be most grateful!!!

Answer 1

Since the circle is a character of font-family: 'Font Awesome 5 Free', one way to do it is by using the background-clip: text.
_{[Note]: See compatibility on caniuse with.}

#link-instagram .fa-circle {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />

<li id="link-instagram" class="list-inline-item">
  <a href="#">
    <span class="fa-stack fa-lg">
      <i class="fas fa-circle fa-stack-2x"></i>
      <i class="fab fa-instagram fa-stack-1x fa-inverse"></i>
    </span>
  </a>
</li>

---

Another way would be for you to circle via css and apply the background to it, example below:

.meu-circulo {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.33333em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />

<li id="link-instagram" class="list-inline-item">
  <a href="#">
    <span class="meu-circulo">
      <i class="fab fa-instagram fa-inverse"></i>
    </span>
  </a>
</li>