/ Published in: CSS
show favicon with css
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
HTML : <nav> <a href="http://github.com">GitHub</a> <a href="http://facebook.com">Facebook</a> <a href="http://youtube.com">Youtube</a> <a href="http://twitter.com">Twitter</a> <a href="http://megawrz.com">megawrz</a> </nav> 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 }
URL: http://www.megawrz.com/css/192003-favicon-link-css.html