How to give gradient color to icon? [duplicate]

Question

I am trying to give gradient color to icon. While this works on text tags,its not working on the icon for me. Any advice would be highly appreciated.

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

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

Answer 1

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>

SOLUTION 2: With Font Awesome Icons I have tried to show here the solution with fontawesome icons.

.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 h3 .fa {
  display: inline;
  margin-left: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="way_icon">
  <h3>jfkfjfjr<i class="fa fa-cog"></i></h3>
  <a href="#"><i class="fa fa-cog"></i></a>
</div>