Hiển thị biểu tượng xã hội bằng CSS dựa trên a href (liên kết) bằng Font Awesome

Hiển thị biểu tượng xã hội bằng CSS dựa trên a href (liên kết) bằng Font Awesome

Code:

/**
 * Don't forget to include FontAwesome library, version 4.7
 */
.social-icons li a:before {
  font-family: FontAwesome;
}

/* Default link icon - keep this icon first */
.social-icons li a[href*="http"]:before,
.social-icons li a[href*="#"]:before {
	content: "\f0c1";
}

/* Amazon */
.social-icons li a[href*="amazon."]:before {
	content: "\f270";
}

/* Behance */
.social-icons li a[href*="behance.net"]:before,
.social-icons li a[href*="be.net"]:before {
	content: "\f1b4";
}

/* Bitbucket */
.social-icons li a[href*="bitbucket.org"]:before {
	content: "\f171";
}

/* Delicious */
.social-icons li a[href*="del.icio.us"]:before {
	content: "\f1a5";
}

/* Dribbble */
.social-icons li a[href*="dribbble.com"]:before {
	content: "\f17d";
}

/* Digg */
.social-icons li a[href*="digg.com"]:before {
	content: "\f1a6";
}

/* Etsy */
.social-icons li a[href*="etsy.com"]:before {
	content: "\f2d7";
}

/* Facebook */
.social-icons li a[href*="facebook.com"]:before {
	content: "\f09a";
}

/* Flickr */
.social-icons li a[href*="flickr.com"]:before {
	content: "\f16e";
}

/* Foursquare */
.social-icons li a[href*="foursquare.com"]:before {
	content: "\f180";
}

/* Github*/
.social-icons li a[href*="github.com"]:before {
	content: "\f09b";
}

/* Gitlab */
.social-icons li a[href*="gitlab.com"]:before {
	content: "\f296";
}

/* Google+ */
.social-icons li a[href*="plus.google.com"]:before {
	content: "\f0d5";
}

/* IMDb */
.social-icons li a[href*="imdb.com"]:before {
	content: "\f2d8";
}

/* Instagram */
.social-icons li a[href*="instagram.com"]:before {
	content: "\f16d";
}

/* LinkedIn */
.social-icons li a[href*="linkedin.com"]:before {
	content: "\f0e1";
}

/* Medium */
.social-icons li a[href*="medium.com"]:before {
	content: "\f23a";
}

/* Paypal */
.social-icons li a[href*="paypal.com"]:before {
	content: "\f1ed";
}

/* Pinterest */
.social-icons li a[href*="pinterest.com"]:before {
	content: "\f231";
}

/* Quora */
.social-icons li a[href*="quora.com"]:before {
	content: "\f2c4";
}

/* Reddit */
.social-icons li a[href*="reddit.com"]:before {
	content: "\f281";
}

/* Slack */
.social-icons li a[href*="slack.com"]:before {
	content: "\f198";
}

/* Soundcloud */
.social-icons li a[href*="soundcloud.com"]:before {
	content: "\f1be";
}

/* Spotify */
.social-icons li a[href*="spotify.com"]:before {
	content: "\f1bc";
}

/* Snapchat */
.social-icons li a[href*="snapchat.com"]:before {
	content: "\f2ac";
}

/* Stack Overflow */
.social-icons li a[href*="stackoverflow.com"]:before {
	content: "\f16c";
}

/* StumbleUpon */
.social-icons li a[href*="stumbleupon.com"]:before {
	content: "\f1a4";
}

/* ThemeIsle */
.social-icons li a[href*="themeisle.com"]:before {
	content: "\f2b2";
}

/* Tripadvisor */
.social-icons li a[href*="tripadvisor.com"]:before {
	content: "\f262";
}

/* Tumblr */
.social-icons li a[href*="tumblr.com"]:before {
	content: "\f173";
}

/* Twitch */
.social-icons li a[href*="twitch.tv"]:before {
	content: "\f1e8";
}

/* Twitter */
.social-icons li a[href*="twitter.com"]:before {
	content: "\f099";
}

/* Vimeo */
.social-icons li a[href*="vimeo.com"]:before {
	content: "\f194";
}

/* Weibo */
.social-icons li a[href*="weibo.com"]:before {
	content: "\f18a";
}

/* Wikipedia */
.social-icons li a[href*="wikipedia.org"]:before {
	content: "\f266";
}

/* Wordpress */
.social-icons li a[href*="wordpress.org"]:before,
.social-icons li a[href*="wordpress.com"]:before{
	content: "\f19a";
}

/* Xing */
.social-icons li a[href*="xing.com"]:before {
	content: "\f168";
}

/* Yahoo */
.social-icons li a[href*="yahoo.com"]:before {
	content: "\f19e";
}

/* Youtube */
.social-icons li a[href*="youtube.com"]:before {
	content: "\f167";
}

End

Nguồn: https://astronautweb.co/snippet/font-awesome/