social links小工具样式

css

a {
  text-decoration: none!important;
}
.social-icons {
  text-align: center;
}
.social-icons a {
  margin: 2px;
  position: relative;
  text-shadow: none;
  display: inline-block;
}
.social-icons-widget .social-icons i:before {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
      border-radius: 2px;
}

.social-icons-widget .social-icons a {
  color: #555 !important;
}

#theme-footer .social-icons-widget .social-icons a {
  color: #999 !important;
}

.social-icons-widget .social-icons.social-colored a {
  color: #FFF !important;
}

.social-icons-widget .social-icons a:hover {
  opacity: 0.7;
}

.social-icons.social-colored .fa-delicious:before,
.arq-lite-delicious a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-delicious a i{
  background: #2567ee
}

.social-icons.social-colored .fa-foursquare:before {
  background: #0d9ed1
}

.social-icons.social-colored .fa-digg:before {
  background: #b2b2b2
}

.social-icons.social-colored .fa-reddit:before {
  background: #ff915c
}

.social-icons.social-colored .tieicon-vimeo:before,
.arq-lite-vimeo a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-vimeo a i{
  background: #3fbfce
}

.social-icons.social-colored .fa-play:before {
  background: #a0b532
}

.social-icons.social-colored .fa-soundcloud:before,
.arq-lite-soundcloud a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-soundcloud a i{
  background: #F76700
}

.social-icons.social-colored .fa-yelp:before {
  background: #c1230d
}

.social-icons.social-colored .fa-github:before {
  background: #666666
}

.social-icons.social-colored .fa-xing:before {
  background: #00605e
}

.social-icons.social-colored .fa-dropbox:before {
  background: #459ce6
}

.social-icons.social-colored .fa-tumblr:before {
  background: #385a75
}

.social-icons.social-colored .fa-apple:before {
  background: #7e878b
}

.social-icons.social-colored .fa-dribbble:before,
.arq-lite-dribbble a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-dribbble a i {
  background: #d875a2
}

.social-icons.social-colored .fa-skype:before {
  background: #00c6ff
}

.social-icons.social-colored .fa-vk:before {
  background: #336699
}

.social-icons.social-colored .fa-snapchat:before {
  background: #f7f306;
}

.social-icons.social-colored .fa-friendfeed:before {
  background: #93b4dd
}

.social-icons.social-colored .fa-lastfm:before {
  background: #f54a3d
}

.social-icons.social-colored .fa-spotify:before {
  background: #7fb718
}

.social-icons.social-colored .fa-paypal:before {
  background: #34aad2
}

.social-icons.social-colored .fa-wordpress:before {
  background: #2071ad
}

.social-icons.social-colored .fa-rss:before,
.arq-lite-rss a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-rss a i {
  background: #f8bc2e
}

.social-icons.social-colored .fa-share-alt:before {
  background: #55ac60
}

.social-icons.social-colored .tieicon-picasa:before {
  background: #9d48a1
}

.social-icons.social-colored .tieicon-evernote:before {
  background: #1c8328
}

.social-icons.social-colored .fa-github:before,
.arq-lite-github a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-github a i {
  background: #4183c4
}

.social-icons.social-colored .tieicon-blogger:before {
  background: #f39d38
}

.social-icons.social-colored .tieicon-viadeo:before {
  background: #f97618
}

.social-icons.social-colored .tieicon-deviantart:before {
  background: #5d6f6d
}

.social-icons.social-colored .tieicon-grooveshark:before {
  background: #248fd3
}

.social-icons.social-colored .tieicon-fivehundredpx:before {
  background: #00adf1
}

.social-icons.social-colored .fa-facebook:before,
.social-facebook,
.author-social a.social-facebook:hover,
.arq-lite-facebook a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-facebook a i {
  background: #39599f
}

.social-icons.social-colored .fa-twitter:before,
.social-twitter,
.author-social a.social-twitter:hover,
.arq-lite-twitter a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-twitter a i {
  background: #45b0e3
}

.social-icons.social-colored .fa-stumbleupon:before,
.social-stumble,
.author-social a.social-stumble:hover {
  background: #eb4924
}

.social-icons.social-colored .fa-linkedin:before,
.social-linkedin,
.author-social a.social-linkedin:hover {
  background: #65b7d2
}

.social-icons.social-colored .fa-pinterest:before,
.social-pinterest,
.author-social a.social-pinterest:hover {
  background: #E00707
}

.social-icons.social-colored .fa-youtube:before,
.social-youtube,
.author-social a.social-youtube:hover,
.arq-lite-youtube a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-youtube a i {
  background: #cc181e
}

.social-icons.social-colored .fa-instagram:before,
.social-instagram,
.author-social a.social-instagram:hover,
.arq-lite-instagram a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-instagram a i {
  background: #3897f0
}

.social-icons.social-colored .fa-behance:before,
.social-behance,
.author-social a.social-behance:hover,
.arq-lite-behance a:hover i,
.arqam-lite-widget-counter.colored .arq-lite-behance a i {
  background: #1769ff
}

.social-icons.social-colored .tieicon-flickr:before,
.social-flickr,
.author-social a.social-flickr:hover {
  background: #ff0084
}

.social-site {
  background: #666
}

html

<div class="social-icons social-colored">
			<a class="ttip-none" title="Facebook" href="https://www.facebook.com/"><i class="ri-wechat-2-fill ri-2x"></i></a>
			<a class="ttip-none" title="Twitter" href="https://twitter.com/"><i class="ri-wechat-2-fill ri-2x"></i></a>
			<a class="ttip-none" title="Pinterest" href="http://www.pinterest.com/mo3aser/"><i class="ri-wechat-2-fill ri-2x"></i></a>
			<a class="ttip-none" title="Dribbble" href="http://dribbble.com/"><i class="ri-wechat-2-fill ri-2x"></i></a>
			<a class="ttip-none" title="Foursquare" href="https://foursquare.com/mo3aser"><i class="ri-wechat-2-fill ri-2x"></i></a>
			<a class="ttip-none" title="instagram" href="http://instagram.com/imo3aser"><i class="ri-wechat-2-fill ri-2x"></i></a>
		</div>