show favicon with css
HTML : CSS:body {
background-image: ;
background-color: #999;
background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
background-image: -ms-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -ms-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
/*background-size*/ -webkit-background-size: 13px, 29px, 37px, 53px;
-moz-background-size: 13px, 29px, 37px, 53px;
-o-background-size: 13px, 29px, 37px, 53px;
background-size: 13px, 29px, 37px, 53px;
padding-top: 50px;
text-align: center;
}
nav {
height: 30px;
margin: 30px auto;
padding: 10px 5px;
/*border-radius*/ -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 560px;
bottom: 26px;
padding: 12px 12px 12px 12px;
background: #fff;
background: -webkit-gradient( linear, 0 0, 0 100%, from(#fff), to(#e5eaee) );
/*linear-gradient*/ background: -webkit-gradient(linear, , from(#fff), to(#e5eaee));
background: -webkit-linear-gradient( top center, #fff, #e5eaee );
background: -moz-linear-gradient( top center, #fff, #e5eaee );
background: -o-linear-gradient( top center, #fff, #e5eaee );
background: linear-gradient( top center, #fff, #e5eaee );
/*box-shadow*/ -webkit-box-shadow: 0 1px 2px #000;
-moz-box-shadow: 0 1px 2px #bdc9d5;
box-shadow: 0px 1px 5px #666;
font: 13px "helvetica", sans-serif;
font-weight: 300;
text-align: center;
text-shadow: 0 1px 0 #fff;
-webkit-tansition: all 10s linear infinite;
}
a[href*="github.com"] {
padding-left: 18px;
background: url("http://www.google.com/s2/u/0/favicons?domain=gist.github.com") left center no-repeat;
}
a[href*="facebook.com"] {
padding-left: 18px;
background: url("http://www.google.com/s2/u/0/favicons?domain=facebook.com") left center no-repeat;
}
a[href*="youtube.com"] {
padding-left: 18px;
background: url("http://www.google.com/s2/u/0/favicons?domain=youtube.com") left center no-repeat;
}
a[href*="twitter.com"] {
padding-left: 18px;
background: url("http://www.google.com/s2/u/0/favicons?domain=twitter.com") left center no-repeat;
}
a[href*="megawrz.com"] {
padding-left: 18px;
background: url("http://www.google.com/s2/u/0/favicons?domain=megawrz.com") left center no-repeat;
}
a {
/*transition*/ -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
color: #999;
font-size: 12px;
text-decoration: none;
margin: 20px 20px;
padding-left: 23px !important;
text-shadow: 1px 1px 0px white;
}
a:hover {
color: #555;
}