Icon with a gradient disappears on mobile

[ston001]

I have an icon that has a gradient applied, but looks fine on desktop but disappears when I view it on my mobile device. Not too sure why?

$el.x-icon{
color: rgb(0,176,228);
background: -moz-linear-gradient(152deg, rgba(0,176,228,1) 10%, rgba(173,0,255,1) 100%);
background: -webkit-linear-gradient(152deg, rgba(0,176,228,1) 10%, rgba(173,0,255,1) 100%);
background: linear-gradient(152deg, rgba(0,176,228,1) 10%, rgba(173,0,255,1) 100%);
/filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00b0e4",endColorstr="#ad00ff",GradientType=1);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color:transparent;
}

.x-icon i:before {
display: initial;
}

[alexander]

Hi @ston001,

Thanks for reaching out. Regretfully, it’s not in the scope of our support to troubleshoot custom CSS, and it’s harder when using some non standard properties like the text fill. Something that may help would be trying to force the display to inline like:

$el.x-icon i:before {
display: inline!important;
}

I don’t know for sure if that will make a difference. If not, I would suggest searching more about issues people have with text gradients because the Icon element is technically rendered as text using FontAwesome as the font.