如何为图标赋予渐变色？

Question

我正在尝试为图标添加渐变色。虽然这适用于文本标签，但对我来说不适用于图标。任何建议将不胜感激。

.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

解决方案1：使用离子图标

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

解决方案2： 我使用Font Awesome Icons（字体真棒图标）在这里展示了fontawesome图标的解决方案。

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