Favicon link in css


/ Published in: CSS
Save to your folder(s)

show favicon with css


Copy this code and paste it in your HTML
  1. HTML :
  2. <nav>
  3. <a href="http://github.com">GitHub</a>
  4. <a href="http://facebook.com">Facebook</a>
  5. <a href="http://youtube.com">Youtube</a>
  6. <a href="http://twitter.com">Twitter</a>
  7. <a href="http://megawrz.com">megawrz</a>
  8. </nav>
  9.  
  10.  
  11.  
  12. CSS:
  13. body {background-image: ;
  14. background-color: #999;
  15. 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%);
  16. 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%);
  17. 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%);
  18. 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%);
  19. /*background-size*/
  20. -webkit-background-size: 13px, 29px, 37px, 53px;
  21. -moz-background-size: 13px, 29px, 37px, 53px;
  22. -o-background-size: 13px, 29px, 37px, 53px;
  23. background-size: 13px, 29px, 37px, 53px;
  24. padding-top: 50px;
  25. text-align: center;
  26. }
  27. nav {
  28. height: 30px;
  29. margin: 30px auto;
  30. padding: 10px 5px;
  31. /*border-radius*/
  32. -webkit-border-radius: 5px;
  33. -moz-border-radius: 5px;
  34. border-radius: 5px;
  35. width: 560px;
  36. bottom: 26px;
  37. padding: 12px 12px 12px 12px;
  38. background: #fff;
  39. background: -webkit-gradient( linear,0 0,0 100%,from(#fff),to(#e5eaee) );
  40. /*linear-gradient*/
  41. background: -webkit-gradient(linear,,from(#fff),to(#e5eaee));
  42. background: -webkit-linear-gradient( top center,#fff,#e5eaee );
  43. background: -moz-linear-gradient( top center,#fff,#e5eaee );
  44. background: -o-linear-gradient( top center,#fff,#e5eaee );
  45. background: linear-gradient( top center,#fff,#e5eaee );
  46. /*box-shadow*/
  47. -webkit-box-shadow: 0 1px 2px #000;
  48. -moz-box-shadow: 0 1px 2px #bdc9d5;
  49. box-shadow: 0px 1px 5px #666;
  50. font: 13px "helvetica",sans-serif;
  51. font-weight: 300;
  52. text-align: center;
  53. text-shadow: 0 1px 0 #fff;
  54. -webkit-tansition: all 10s linear infinite;
  55. }
  56. a[href*="github.com"] {
  57. padding-left: 18px;
  58. background: url(http://www.google.com/s2/u/0/favicons?domain=gist.github.com) left center no-repeat;
  59. }
  60. a[href*="facebook.com"] {
  61. padding-left: 18px;
  62. background: url(http://www.google.com/s2/u/0/favicons?domain=facebook.com) left center no-repeat;
  63. }
  64. a[href*="youtube.com"] {
  65. padding-left: 18px;
  66. background: url(http://www.google.com/s2/u/0/favicons?domain=youtube.com) left center no-repeat;
  67. }
  68. a[href*="twitter.com"] {
  69. padding-left: 18px;
  70. background: url(http://www.google.com/s2/u/0/favicons?domain=twitter.com) left center no-repeat;
  71. }
  72. a[href*="megawrz.com"] {
  73. padding-left: 18px;
  74. background: url(http://www.google.com/s2/u/0/favicons?domain=megawrz.com) left center no-repeat;
  75. }
  76. a {
  77. /*transition*/
  78. -webkit-transition: all 0.2s ease;
  79. -moz-transition: all 0.2s ease;
  80. -o-transition: all 0.2s ease;
  81. transition: all 0.2s ease;
  82. color: #999;
  83. font-size: 12px;
  84. text-decoration: none;
  85. margin: 20px 20px;
  86. padding-left: 23px !important;
  87. text-shadow: 1px 1px 0px white;
  88. }
  89. a:hover { color: #555 }

URL: http://www.megawrz.com/css/192003-favicon-link-css.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.