StackExchange color icon in html

Question

I'm trying my build my personal webpage. I want to link to my stack exchange profile in my webpage using stack exchange icon. However the icons in font-awesome are grayscale (not color). I've colored other icons like LinkedIn, ORCID using CSS.

.color-linkedin {
    color: #0e76a8;
}
.color-orcid {
    color: #a6ce39;
}

But, StackExchange has shades of color. Is there something else that provided colored icon for SE? Or can I color it via CSS?

PS: Any other suggestions are also welcome. My Repository

Gnotobiotics

You could use the svg provided here instead. Since it is an SVG, you can grab its mark-up and place it within your code – Bailsman

Answer 1

It seems to me that you should change this property to change the color of the StackExchange icon:

.fa-stack-exchange:before {
                    content: "\f18d";
                    color: red;
}

As you said, the code above would change the whole icon, but basically you want to use gradient on your icon. I have done some research and found out what you need to do. You need to set these values:

.fa-stack-exchange:before {
          content: "\f18d";
          background: -webkit-linear-gradient(FIRST COLOR, SECOND COLOR);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

Armhole

That will make the entire icon red color. Instead I want the icon as this in the link by Nick Parsons – Gnotobiotics

@NagabhushanSN what's the problem with the SVG, though? – Tumulus

@double_beep No problem. I was hoping if there is a direct solution. That is instead of downloading the image and having it in my repo. – Gnotobiotics