1

Tenho esse código:

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

e queria adicionar um gradient no circulo do Instagram mas não consigo de maneira nenhuma.

Se alguém puder ajudar ficaria muito agradecido!!!

2

1 Resposta 1

1

Já que o circulo é uma caracter da font-family: 'Font Awesome 5 Free', uma forma de fazer é usando o background-clip: text.
[Nota]: Veja a compatibilidade no caniuse.com

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


Outra forma seria você fazer o circulo via css e aplicar o background nele, exemplo abaixo:

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

1
  • Funcionou!!! Muito obrigado pela ajuda ;D Commented 15/12/2019 às 4:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .