Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

StackExchange color icon in html

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

like image 581
Nagabhushan S N Avatar asked Oct 29 '20 06:10

Nagabhushan S N


People also ask

How do you change the color of an icon in HTML?

Once you decided the icons on which you want to change the color, then go to “Appearance > Customizer > Additional CSS” and paste your CSS code. Once you added your CSS code inside the box, click on the blue-colored “Publish” button showing on the top left corner.


Video Answer


1 Answers

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;
like image 180
Richrds Avatar answered Nov 04 '22 08:11

Richrds