Skip to content

Instantly share code, notes, and snippets.

@tiagonoronha
Created May 22, 2018 12:57
Show Gist options
  • Save tiagonoronha/9208a7e46178dbf18485081a69fab53e to your computer and use it in GitHub Desktop.
Save tiagonoronha/9208a7e46178dbf18485081a69fab53e to your computer and use it in GitHub Desktop.
Storefront social icons in secondary nav
.secondary-navigation a[href*="dribbble.com"], .secondary-navigation a[href*="facebook.com"], .secondary-navigation a[href*="flickr.com"], .secondary-navigation a[href*="foursquare.com"], .secondary-navigation a[href*="plus.google.com"], .secondary-navigation a[href*="instagram.com"], .secondary-navigation a[href*="linkedin.com"], .secondary-navigation a[href*="pinterest.com"], .secondary-navigation a[href*="reddit.com"], .secondary-navigation a[href*="tumblr.com"], .secondary-navigation a[href*="twitter.com"], .secondary-navigation a[href*="vimeo.com"], .secondary-navigation a[href*="wordpress.com"], .secondary-navigation a[href*="wordpress.org"], .secondary-navigation a[href*="youtube.com"], .secondary-navigation a[href*="mailto:"], .secondary-navigation a[href*="twitch.tv"], .secondary-navigation a[href$="/feed/"] {
text-indent: -9999px; }
.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href*="twitch.tv"]:after, .secondary-navigation a[href$="/feed/"]:after {
text-indent: 0;
display: block;
float: left; }
.secondary-navigation a[href*="dribbble.com"]:after, .secondary-navigation a[href*="facebook.com"]:after, .secondary-navigation a[href*="flickr.com"]:after, .secondary-navigation a[href*="foursquare.com"]:after, .secondary-navigation a[href*="plus.google.com"]:after, .secondary-navigation a[href*="instagram.com"]:after, .secondary-navigation a[href*="linkedin.com"]:after, .secondary-navigation a[href*="pinterest.com"]:after, .secondary-navigation a[href*="reddit.com"]:after, .secondary-navigation a[href*="tumblr.com"]:after, .secondary-navigation a[href*="twitter.com"]:after, .secondary-navigation a[href*="vimeo.com"]:after, .secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after, .secondary-navigation a[href*="youtube.com"]:after, .secondary-navigation a[href*="twitch.tv"]:after {
font-family: "Font Awesome 5 Brands";
font-weight: 400; }
.secondary-navigation a[href*="mailto:"]:after, .secondary-navigation a[href$="/feed/"]:after {
font-family: "Font Awesome 5 Free";
font-weight: 900; }
.secondary-navigation a[href$="/feed/"]:after {
content: "\f09e";
color: #ff9900; }
.secondary-navigation a[href*="twitch.tv"]:after {
content: "\f1e8";
color: #6441A5; }
.secondary-navigation a[href*="mailto:"]:after {
content: "\f0e0"; }
.secondary-navigation a[href*="youtube.com"]:after {
content: "\f167";
color: #bb0000; }
.secondary-navigation a[href*="wordpress.com"]:after, .secondary-navigation a[href*="wordpress.org"]:after {
content: "\f19a";
color: #0073aa; }
.secondary-navigation a[href*="vimeo.com"]:after {
content: "\f194";
color: #aad450; }
.secondary-navigation a[href*="tumblr.com"]:after {
content: "\f173";
color: #32506d; }
.secondary-navigation a[href*="reddit.com"]:after {
content: "\f231"; }
.secondary-navigation a[href*="twitter.com"]:after {
content: "\f099";
color: #00aced; }
.secondary-navigation a[href*="dribbble.com"]:after {
content: "\f17d";
color: #ea4c89; }
.secondary-navigation a[href*="facebook.com"]:after {
content: "\f09a";
color: #3b5998; }
.secondary-navigation a[href*="flickr.com"]:after {
content: "\f16e";
color: #ff0084; }
.secondary-navigation a[href*="foursquare.com"]:after {
content: "\f180";
color: #0072b1; }
.secondary-navigation a[href*="plus.google.com"]:after {
content: "\f0d5";
color: #dd4b39; }
.secondary-navigation a[href*="instagram.com"]:after {
content: "\f16d";
color: #517fa4; }
.secondary-navigation a[href*="linkedin.com"]:after {
content: "\f0e1";
color: #007bb6; }
.secondary-navigation a[href*="pinterest.com"]:after {
content: "\f231";
color: #cb2027; }
@a162624
Copy link

a162624 commented Jun 28, 2022

How would this look for the spotify icon? href = open.spotify.com/..... thanks

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