8

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

Nagabhushan S N
  • 6,407
  • 8
  • 44
  • 87
  • 3
    You could use the svg provided [here](https://stackoverflow.design/assets/img/logos/se/se-icon.svg) instead. Since it is an SVG, you can grab its mark-up and place it within your code – Nick Parsons Oct 29 '20 at 06:58

1 Answers1

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;
risokentos
  • 66
  • 8
  • That will make the entire icon red color. Instead I want the icon as [this](https://stackoverflow.design/assets/img/logos/se/se-icon.svg) in the link by [Nick Parsons](https://stackoverflow.com/users/5648954/nick-parsons) – Nagabhushan S N Oct 29 '20 at 13:01
  • @NagabhushanSN what's the problem with the SVG, though? – double-beep Oct 29 '20 at 13:35
  • @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. – Nagabhushan S N Oct 29 '20 at 13:47