-
-
Save ksloan/d1b9ace61fddd2356ebf to your computer and use it in GitHub Desktop.
.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; | |
} |
How do you accomplish this with version 5.9.0?
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; }
.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;
}
Thanks
Thank you, that is really helpful.
some more
`/* Facebook */
.fa-facebook, .fa-facebook-square { color: #3b5998; }
.fa-facebook-f, .fa-facebook-messenger { color: #3b5998; }
/* Twitter */
.fa-twitter, .fa-twitter-square { color: #1DA1F2; }
/* Google Plus (deprecated but still in use) */
.fa-google-plus, .fa-google-plus-square { color: #DD4B39; }
/* YouTube */
.fa-youtube, .fa-youtube-play, .fa-youtube-square { color: #FF0000; }
/* Tumblr */
.fa-tumblr, .fa-tumblr-square { color: #35465c; }
/* Vine (deprecated but still in use) */
.fa-vine { color: #00BF8F; }
/* Flickr */
.fa-flickr { color: #FF0084; }
/* Vimeo */
.fa-vimeo, .fa-vimeo-square { color: #1ab7ea; }
/* Pinterest */
.fa-pinterest, .fa-pinterest-square { color: #E60023; }
/* LinkedIn */
.fa-linkedin, .fa-linkedin-square { color: #0077B5; }
/* Instagram */
.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;
}
/* Spotify */
.fa-spotify { color: #1DB954; }
/* Snapchat */
.fa-snapchat, .fa-snapchat-ghost { color: #FFFC00; }
/* Reddit */
.fa-reddit, .fa-reddit-square { color: #FF4500; }
/* Dribbble */
.fa-dribbble, .fa-dribbble-square { color: #ea4c89; }
/* Behance */
.fa-behance, .fa-behance-square { color: #1769ff; }
/* Github */
.fa-github, .fa-github-square { color: #333; }
/* Stack Overflow */
.fa-stack-overflow { color: #f48024; }
/* WhatsApp */
.fa-whatsapp, .fa-whatsapp-square { color: #25D366; }
/* TikTok /
.fa-tiktok { color: #010101; } / TikTok does not have a single color; you might want to use an icon image or gradient */
/* Viber */
.fa-viber { color: #665CAC; }
/* Imo /
.fa-imo { color: #1C9CEA; } / Note: Font Awesome does not have an official fa-imo
class; this is a placeholder */
/* Google Maps /
.fa-map-marked-alt { color: #4285F4; } / Google Maps icon */
/* Zoom (using a generic video camera icon as a placeholder) */
.fa-video { color: #2D8CFF; }
/* Microsoft Teams /
.fa-microsoft-teams { color: #6264A7; } / Note: Font Awesome does not have an official fa-microsoft-teams
class; this is a placeholder */
/* Telegram */
.fa-telegram { color: #0088cc; }
`
Awesome!