Skip to content

Instantly share code, notes, and snippets.

@ksloan
Last active December 29, 2022 17:57
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save ksloan/d1b9ace61fddd2356ebf to your computer and use it in GitHub Desktop.
Save ksloan/d1b9ace61fddd2356ebf to your computer and use it in GitHub Desktop.
CSS Color Definitions for Font-Awesome Social Icons
.fa-facebook, .fa-facebook-square {
color: #3b5998
}
.fa-twitter, .fa-twitter-square {
color: #00aced
}
.fa-google-plus, .fa-google-plus-square {
color: #dd4b39
}
.fa-youtube, .fa-youtube-play, .fa-youtube-square {
color: #bb0000
}
.fa-tumblr, .fa-tumblr-square {
color: #32506d
}
.fa-vine {
color: #00bf8f
}
.fa-flickr {
color: #ff0084
}
.fa-vimeo-square {
color: #aad450
}
.fa-pinterest, .fa-pinterest-square {
color: #cb2027
}
.fa-linkedin, .fa-linkedin-square {
color: #007bb6
}
.fa-instagram {
color: #517fa4;
}
.fa-spotify {
color: #1ED760;
}
@Mecanik
Copy link

Mecanik commented Oct 19, 2019

Awesome!

@Hozey
Copy link

Hozey commented Oct 28, 2019

How do you accomplish this with version 5.9.0?

@Xevion
Copy link

Xevion commented Jul 22, 2020

Short, minimized version.

.fa-facebook, .fa-facebook-square { color: #3b5998; }
.fa-twitter, .fa-twitter-square { color: #00aced; }
.fa-google-plus, .fa-google-plus-square { color: #dd4b39; }
.fa-youtube, .fa-youtube-play, .fa-youtube-square { color: #bb0000; }
.fa-tumblr, .fa-tumblr-square { color: #32506d; }
.fa-vine { color: #00bf8f; }
.fa-flickr { color: #ff0084; }
.fa-vimeo-square { color: #aad450; }
.fa-pinterest, .fa-pinterest-square { color: #cb2027; }
.fa-linkedin, .fa-linkedin-square { color: #007bb6;}
.fa-instagram { color: #517fa4; }
.fa-spotify { color: #1ed760; }

@gnzlst
Copy link

gnzlst commented Nov 19, 2020

.fa-instagram {
color: transparent;
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
background-clip: text;
-webkit-background-clip: text;
}

@LakkisSari
Copy link

Thanks

@essensian
Copy link

Thank you, that is really helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment