2

Cannot get it to work in IE 10 :( I use icon from font-awesome, and trying to add linear-gradient to it.

enter image description here

background: linear-gradient(top right, red 0%, brown 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

All works except IE. Tried different prefixes, but as I understand I need prefix for these:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

But google says IE does not support them at all.. What can I do?

.icon {
    font-size: 400%;
}

/* Color gradient class, for card icons and titles */
.fa-gradient {

    /* old browsers */
    background: red;

    /* IE10+ */ 
    background: -ms-linear-gradient(top right, red 0%, brown 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top right, red 0%, brown 100%);

    /* Opera */ 
    background: -o-linear-gradient(top right, red 0%, brown 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);

    /* W3C Markup */ 
    background: linear-gradient(to top right, red 0%, brown 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown',GradientType=1 );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

    <i class="fa fa-calendar fa-5x fa-gradient" aria-hidden="true">
    </i>

    <i class="fa fa-users fa-5x fa-gradient" aria-hidden="true">
    </i>
</body>

5
  • 1
    CSS Gradients are only supported with IE11. See caniuse.com for more informations Jan 12, 2018 at 7:56
  • Any workaround/js polyfill? Maybe I can add selective code for IE and other browsers?..
    – Gennady G
    Jan 12, 2018 at 8:33
  • 1
    You could do it with media queries. See this answer on SO for more help: Jay Patels answer on SO Jan 12, 2018 at 8:53
  • Thank You guys! I'll try and give feedback!
    – Gennady G
    Jan 13, 2018 at 8:07
  • Thank You Patrick!
    – Gennady G
    Jan 15, 2018 at 12:39

2 Answers 2

4

Yes, thank You guys!

@media queries helped!

/* Color gradient class, for card icons and titles */
.fa-gradient {
    /* old browsers */
    background: red;
    /* IE10+ */
    background: -ms-linear-gradient(top right, red 0%, brown 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top right, red 0%, brown 100%);
    /* Opera */
    background: -o-linear-gradient(top right, red 0%, brown 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);
    /* W3C Markup */
    background: linear-gradient(top right, red 0%, brown 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown00', GradientType=1);
    /*background: linear-gradient(linear, left bottom, right top, from(brown), to(red));*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .fa-gradient {
        color: red;
        background: transparent;
    }
}
2

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.

1
  • Can I add some code that shows this font, for example - red in IE, and gradient for other browsers?
    – Gennady G
    Jan 12, 2018 at 8:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.