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：使用ION ICON

ignoreOnError()

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

解决方案2：使用字体真棒图标 我试图用fontawesome图标显示解决方案。

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

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

Answer 2

问题在于此处，因为display:inline-block已应用于图标伪类:before ..这就是为什么渐变不起作用...

您必须将display: initial设置为图标伪元素

Stack Snippet

.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: initial;
}

<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 个答案: