Main Content
Social Media Styles
Standard Wireframing Elements
Close
HTML
<section class="smi-style-1">
<div class="container">
<div class="social-media">
<a href="#" target="_blank" class="fb">
<span class="ai-font-facebook"></span>
</a>
<a href="#" target="_blank" class="tw">
<span class="ai-font-twitter"></span>
</a>
<a href="#" target="_blank" class="yt">
<span class="ai-font-youtube"></span>
</a>
<a href="#" target="_blank" class="ln">
<span class="ai-font-linkedin"></span>
</a>
<a href="#" target="_blank" class="gp">
<span class="ai-font-google-plus"></span>
</a>
<a href="#" target="_blank" class="pn">
<span class="ai-font-pinterest"></span>
</a>
<a href="#" target="_blank" class="ig">
<span class="ai-font-instagram"></span>
</a>
<a href="#" target="_blank" class="fl">
<span class="ai-font-flickr"></span>
</a>
<a href="#" target="_blank" class="ar">
<span class="ai-font-active-rain"></span>
</a>
<a href="#" target="_blank" class="zl">
<span class="ai-font-zillow"></span>
</a>
<a href="#" target="_blank" class="yp">
<span class="ai-font-yelp"></span>
</a>
<a href="#" target="_blank" class="tr">
<span class="ai-font-trulia"></span>
</a>
<a href="#" target="_blank" class="fq">
<span class="ai-font-foursquare"></span>
</a>
<a href="#" target="_blank" class="vm">
<span class="ai-font-vimeo"></span>
</a>
<a href="#" target="_blank" class="rs">
<span class="ai-font-rss"></span>
</a>
<a href="#" target="_blank" class="wps">
<span class="ai-font-wordpress"></span>
</a>
<a href="#" target="_blank" class="bg">
<span class="ai-font-blogger"></span>
</a>
<a href="#" target="_blank" class="tb">
<span class="ai-font-tumblr"></span>
</a>
<a href="#" target="_blank" class="bb">
<span class="ai-font-bbb"></span>
</a>
<a href="#" target="_blank" class="cm">
<span class="ai-font-caimeiju"></span>
</a>
<a href="#" target="_blank" class="hz">
<span class="ai-font-houzz"></span>
</a>
</div>
</div>
</section>
CSS
.smi-style-1{
text-align: center;
}
.smi-style-1 a{
display: inline-block;
vertical-align: top;
}
.smi-style-1 a span{
width: 42px;
height: 42px;
background: #000;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 50%;
display: block;
font-size: 20px;
margin: 5px 0;
}
.smi-style-1 a span:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.smi-style-1 a span:before{
display: inline-block;
vertical-align: middle;
}
.smi-style-1 a.fb span{
background: #4d6baa;
}
.smi-style-1 a.tw span{
background: #4fc6f8;
}
.smi-style-1 a.yt span{
background: #cd201f;
}
.smi-style-1 a.ln span{
background: #0077b5;
}
.smi-style-1 a.gp span{
background: #dc4e41;
}
.smi-style-1 a.pn span{
background: #bd081c;
}
.smi-style-1 a.ig span{
background: #3f729b;
}
.smi-style-1 a.fl span{
background: transparent;
border: 1px solid #e5e5e5;
color: #000;
}
.smi-style-1 a.ar span{
background: #f3a31e;
}
.smi-style-1 a.zl span{
background: #1277e1;
}
.smi-style-1 a.yp span{
background: #af0606;
}
.smi-style-1 a.tr span{
background: #5eab1f;
}
.smi-style-1 a.fq span{
background: #2d5be3;
}
.smi-style-1 a.vm span{
background: #1ab7ea;
}
.smi-style-1 a.rs span{
background: #f26522;
}
.smi-style-1 a.wps span{
background: #21759b;
}
.smi-style-1 a.bg span{
background: #0788ca;
}
.smi-style-1 a.tb span{
background: #35465c;
}
.smi-style-1 a.bb span{
background: #146696;
font-size: 27px;
}
.smi-style-1 a.cm span{
font-size: 27px;
}
.smi-style-1 a.hz span{
background: transparent;
border: 1px solid #e5e5e5;
color: #000;
}
CSS Mobile
Javascript
Close
HTML
<section class="smi-style-2">
<div class="container">
<div class="social-media">
<a href="#" target="_blank" class="fb">
<span class="ai-font-facebook"></span>
</a>
<a href="#" target="_blank" class="tw">
<span class="ai-font-twitter"></span>
</a>
<a href="#" target="_blank" class="yt">
<span class="ai-font-youtube"></span>
</a>
<a href="#" target="_blank" class="ln">
<span class="ai-font-linkedin"></span>
</a>
<a href="#" target="_blank" class="gp">
<span class="ai-font-google-plus"></span>
</a>
<a href="#" target="_blank" class="pn">
<span class="ai-font-pinterest"></span>
</a>
<a href="#" target="_blank" class="ig">
<span class="ai-font-instagram"></span>
</a>
<a href="#" target="_blank" class="fl">
<span class="ai-font-flickr"></span>
</a>
<a href="#" target="_blank" class="ar">
<span class="ai-font-active-rain"></span>
</a>
<a href="#" target="_blank" class="zl">
<span class="ai-font-zillow"></span>
</a>
<a href="#" target="_blank" class="yp">
<span class="ai-font-yelp"></span>
</a>
<a href="#" target="_blank" class="tr">
<span class="ai-font-trulia"></span>
</a>
<a href="#" target="_blank" class="fq">
<span class="ai-font-foursquare"></span>
</a>
<a href="#" target="_blank" class="vm">
<span class="ai-font-vimeo"></span>
</a>
<a href="#" target="_blank" class="rs">
<span class="ai-font-rss"></span>
</a>
<a href="#" target="_blank" class="wps">
<span class="ai-font-wordpress"></span>
</a>
<a href="#" target="_blank" class="bg">
<span class="ai-font-blogger"></span>
</a>
<a href="#" target="_blank" class="tb">
<span class="ai-font-tumblr"></span>
</a>
<a href="#" target="_blank" class="bb">
<span class="ai-font-bbb"></span>
</a>
<a href="#" target="_blank" class="cm">
<span class="ai-font-caimeiju"></span>
</a>
<a href="#" target="_blank" class="hz">
<span class="ai-font-houzz"></span>
</a>
</div>
</div>
</section>
CSS
.smi-style-2{
text-align: center;
}
.smi-style-2 a{
display: inline-block;
vertical-align: top;
}
.smi-style-2 a span{
width: 42px;
height: 42px;
background: #000;
color: #fff;
text-decoration: none;
text-align: center;
border-radius: 50%;
display: block;
font-size: 20px;
margin: 5px 0;
}
.smi-style-2 a span:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.smi-style-2 a span:before{
display: inline-block;
vertical-align: middle;
}
.smi-style-2 a.bb span{
font-size: 27px;
}
.smi-style-2 a.cm span{
font-size: 27px;
}
CSS Mobile
Javascript
Close
HTML
<section class="smi-style-3">
<div class="container">
<div class="social-media">
<a href="#" target="_blank" class="fb">
<span class="ai-font-facebook"></span>
</a>
<a href="#" target="_blank" class="tw">
<span class="ai-font-twitter"></span>
</a>
<a href="#" target="_blank" class="yt">
<span class="ai-font-youtube"></span>
</a>
<a href="#" target="_blank" class="ln">
<span class="ai-font-linkedin"></span>
</a>
<a href="#" target="_blank" class="gp">
<span class="ai-font-google-plus"></span>
</a>
<a href="#" target="_blank" class="pn">
<span class="ai-font-pinterest"></span>
</a>
<a href="#" target="_blank" class="ig">
<span class="ai-font-instagram"></span>
</a>
<a href="#" target="_blank" class="fl">
<span class="ai-font-flickr"></span>
</a>
<a href="#" target="_blank" class="ar">
<span class="ai-font-active-rain"></span>
</a>
<a href="#" target="_blank" class="zl">
<span class="ai-font-zillow"></span>
</a>
<a href="#" target="_blank" class="yp">
<span class="ai-font-yelp"></span>
</a>
<a href="#" target="_blank" class="tr">
<span class="ai-font-trulia"></span>
</a>
<a href="#" target="_blank" class="fq">
<span class="ai-font-foursquare"></span>
</a>
<a href="#" target="_blank" class="vm">
<span class="ai-font-vimeo"></span>
</a>
<a href="#" target="_blank" class="rs">
<span class="ai-font-rss"></span>
</a>
<a href="#" target="_blank" class="wps">
<span class="ai-font-wordpress"></span>
</a>
<a href="#" target="_blank" class="bg">
<span class="ai-font-blogger"></span>
</a>
<a href="#" target="_blank" class="tb">
<span class="ai-font-tumblr"></span>
</a>
<a href="#" target="_blank" class="bb">
<span class="ai-font-bbb"></span>
</a>
<a href="#" target="_blank" class="cm">
<span class="ai-font-caimeiju"></span>
</a>
<a href="#" target="_blank" class="hz">
<span class="ai-font-houzz"></span>
</a>
</div>
</div>
</section>
CSS
.smi-style-3{
text-align: center;
}
.smi-style-3 a{
display: inline-block;
vertical-align: top;
}
.smi-style-3 a span{
width: 42px;
height: 42px;
color: #000;
text-decoration: none;
text-align: center;
border-radius: 50%;
display: block;
font-size: 20px;
margin: 5px 0;
}
.smi-style-3 a span:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.smi-style-3 a span:before{
display: inline-block;
vertical-align: middle;
}
.smi-style-3 a.bb span{
font-size: 27px;
}
.smi-style-3 a.cm span{
font-size: 27px;
}
CSS Mobile
Javascript
Close
HTML
<section class="smi-style-4">
<div class="container">
<div class="social-media">
<a href="#" target="_blank" class="fb">
<span class="ai-font-facebook"></span>
</a>
<a href="#" target="_blank" class="tw">
<span class="ai-font-twitter"></span>
</a>
<a href="#" target="_blank" class="yt">
<span class="ai-font-youtube"></span>
</a>
<a href="#" target="_blank" class="ln">
<span class="ai-font-linkedin"></span>
</a>
<a href="#" target="_blank" class="gp">
<span class="ai-font-google-plus"></span>
</a>
<a href="#" target="_blank" class="pn">
<span class="ai-font-pinterest"></span>
</a>
<a href="#" target="_blank" class="ig">
<span class="ai-font-instagram"></span>
</a>
<a href="#" target="_blank" class="fl">
<span class="ai-font-flickr"></span>
</a>
<a href="#" target="_blank" class="ar">
<span class="ai-font-active-rain"></span>
</a>
<a href="#" target="_blank" class="zl">
<span class="ai-font-zillow"></span>
</a>
<a href="#" target="_blank" class="yp">
<span class="ai-font-yelp"></span>
</a>
<a href="#" target="_blank" class="tr">
<span class="ai-font-trulia"></span>
</a>
<a href="#" target="_blank" class="fq">
<span class="ai-font-foursquare"></span>
</a>
<a href="#" target="_blank" class="vm">
<span class="ai-font-vimeo"></span>
</a>
<a href="#" target="_blank" class="rs">
<span class="ai-font-rss"></span>
</a>
<a href="#" target="_blank" class="wps">
<span class="ai-font-wordpress"></span>
</a>
<a href="#" target="_blank" class="bg">
<span class="ai-font-blogger"></span>
</a>
<a href="#" target="_blank" class="tb">
<span class="ai-font-tumblr"></span>
</a>
<a href="#" target="_blank" class="bb">
<span class="ai-font-bbb"></span>
</a>
<a href="#" target="_blank" class="cm">
<span class="ai-font-caimeiju"></span>
</a>
<a href="#" target="_blank" class="hz">
<span class="ai-font-houzz"></span>
</a>
</div>
</div>
</section>
CSS
.smi-style-4{
text-align: center;
}
.smi-style-4 a{
display: inline-block;
vertical-align: top;
}
.smi-style-4 a span{
width: 34px;
height: 34px;
background: #000;
color: #fff;
text-decoration: none;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: block;
font-size: 20px;
margin: 5px 5PX;
}
.smi-style-4 a span:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.smi-style-4 a span:before{
display: inline-block;
vertical-align: middle;
}
.smi-style-4 a.fb span{
background: #4d6baa;
}
.smi-style-4 a.tw span{
background: #4fc6f8;
}
.smi-style-4 a.yt span{
background: #cd201f;
}
.smi-style-4 a.ln span{
background: #0077b5;
}
.smi-style-4 a.gp span{
background: #dc4e41;
}
.smi-style-4 a.pn span{
background: #bd081c;
}
.smi-style-4 a.ig span{
background: #3f729b;
}
.smi-style-4 a.fl span{
background: transparent;
border: 1px solid #e5e5e5;
color: #000;
}
.smi-style-4 a.ar span{
background: #f3a31e;
}
.smi-style-4 a.zl span{
background: #1277e1;
}
.smi-style-4 a.yp span{
background: #af0606;
}
.smi-style-4 a.tr span{
background: #5eab1f;
}
.smi-style-4 a.fq span{
background: #2d5be3;
}
.smi-style-4 a.vm span{
background: #1ab7ea;
}
.smi-style-4 a.rs span{
background: #f26522;
}
.smi-style-4 a.wps span{
background: #21759b;
}
.smi-style-4 a.bg span{
background: #0788ca;
}
.smi-style-4 a.tb span{
background: #35465c;
}
.smi-style-4 a.bb span{
background: #146696;
font-size: 27px;
}
.smi-style-4 a.cm span{
font-size: 27px;
}
.smi-style-4 a.hz span{
background: transparent;
border: 1px solid #e5e5e5;
color: #000;
}
CSS Mobile
Javascript
Close
HTML
<section class="smi-style-5">
<div class="container">
<div class="social-media">
<a href="#" target="_blank" class="fb">
<span class="ai-font-facebook"></span>
</a>
<a href="#" target="_blank" class="tw">
<span class="ai-font-twitter"></span>
</a>
<a href="#" target="_blank" class="yt">
<span class="ai-font-youtube"></span>
</a>
<a href="#" target="_blank" class="ln">
<span class="ai-font-linkedin"></span>
</a>
<a href="#" target="_blank" class="gp">
<span class="ai-font-google-plus"></span>
</a>
<a href="#" target="_blank" class="pn">
<span class="ai-font-pinterest"></span>
</a>
<a href="#" target="_blank" class="ig">
<span class="ai-font-instagram"></span>
</a>
<a href="#" target="_blank" class="fl">
<span class="ai-font-flickr"></span>
</a>
<a href="#" target="_blank" class="ar">
<span class="ai-font-active-rain"></span>
</a>
<a href="#" target="_blank" class="zl">
<span class="ai-font-zillow"></span>
</a>
<a href="#" target="_blank" class="yp">
<span class="ai-font-yelp"></span>
</a>
<a href="#" target="_blank" class="tr">
<span class="ai-font-trulia"></span>
</a>
<a href="#" target="_blank" class="fq">
<span class="ai-font-foursquare"></span>
</a>
<a href="#" target="_blank" class="vm">
<span class="ai-font-vimeo"></span>
</a>
<a href="#" target="_blank" class="rs">
<span class="ai-font-rss"></span>
</a>
<a href="#" target="_blank" class="wps">
<span class="ai-font-wordpress"></span>
</a>
<a href="#" target="_blank" class="bg">
<span class="ai-font-blogger"></span>
</a>
<a href="#" target="_blank" class="tb">
<span class="ai-font-tumblr"></span>
</a>
<a href="#" target="_blank" class="bb">
<span class="ai-font-bbb"></span>
</a>
<a href="#" target="_blank" class="cm">
<span class="ai-font-caimeiju"></span>
</a>
<a href="#" target="_blank" class="hz">
<span class="ai-font-houzz"></span>
</a>
</div>
</div>
</section>
CSS
.smi-style-5{
text-align: center;
}
.smi-style-5 a{
display: inline-block;
vertical-align: top;
}
.smi-style-5 a span{
width: 34px;
height: 34px;
background: transparent;
color: #636363;
border: 1px solid #d0d0d0;
text-decoration: none;
text-align: center;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: block;
font-size: 20px;
margin: 5px 5PX;
}
.smi-style-5 a span:after{
content: "";
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.smi-style-5 a span:before{
display: inline-block;
vertical-align: middle;
}
CSS Mobile
Javascript
Close
HTML
<section class="smi-style-6">
<div class="container">
<div class="social-media">
<a href="#" target="_blank" class="fb">
<span class="mc-text-facebook">
<i class="ai-font-mc-text-facebook"></i>
</span>
</a>
<a href="#" target="_blank" class="tw">
<span class="mc-text-twitter">
<i class="ai-font-mc-text-twitter"></i>
</span>
</a>
<a href="#" target="_blank" class="yt">
<span class="mc-text-youtube ai-font-mc-text-youtube">
<i class="ai-font-mc-text-youtube"></i>
</span>
</a>
<a href="#" target="_blank" class="ln">
<span class="mc-text-linkedin ai-font-mc-text-linkedin">
<i class="ai-font-mc-text-linkedin"></i>
</span>
</a>
<a href="#" target="_blank" class="gp">
<span class="mc-text-google-plus">
<i class="ai-font-mc-text-google-plus"></i>
</span>
</a>
<a href="#" target="_blank" class="pn">
<span class="mc-text-pinterest">
<i class="ai-font-mc-text-pinterest"></i>
</span>
</a>
<a href="#" target="_blank" class="ig">
<span class="mc-text-instagram">
<i class="ai-font-mc-text-instagram"></i>
</span>
</a>
<a href="#" target="_blank" class="zl">
<span class="mc-text-zillow ai-font-mc-text-zillow">
<i class="ai-font-mc-text-zillow"></i>
</span>
</a>
</div>
</div>
</section>
CSS
.smi-style-6{
text-align: center;
}
.smi-style-6 a{
display: inline-block;
vertical-align: top;
font-size: 34px;
margin: 20px 54px;
text-decoration: none;
}
.smi-style-6 a span{
}
.smi-style-6 a span i{
display: inline-block;
vertical-align: top;
}
.smi-style-6 a span i:before{
right: 7px;
}
CSS Mobile
Javascript