Text Gradient with Font Awesome

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>

Font awesome gradient animation on hover

Animate a background: linear-gradient(... is basically the same than trying to animate a background-image by playing with its position, which mostly ends in unwanted flickering issues.

Instead, you can have two backgrounds and swap them on hover via opacity.
Notice in the example I've used a mixin for reusing it (inserts an :after pseudoelement and supports a $content parameter so you can provide the FontAwesome icon code).

See it here: https://codepen.io/cdtapay/pen/NommGN

Font(text) linear-gradient in IE 10. How?

There is no way to make this work in IE10.
Your only options are using an image or svg to create that icon with a gradient.

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 give gradient color to icon?

SOLUTION 1: WITH ION ICON

.way_icon h3 {
  font-size: 40px;
  background: -moz-linear-gradient(top, #e72c83 0%, #a742c6 100%);
  background: -webkit-linear-gradient(top, #e72c83 0%, #a742c6 100%);
  background: linear-gradient(to bottom, #e72c83 0%, #a742c6 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.way_icon i:before {
  display: inline;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<div class="way_icon">
  <h3>Welcome <i class="ion-ios-gear"></i></h3>
  <a href="#"><i class="ion-ios-gear"></i></a>
</div>

---

Related Topics