瀏覽代碼

use svg images instead of .ico (Thanks to Terence Eden - https://github.com/edent/SuperTinyIcons)

Fernando Ribeiro 7 年之前
父節點
當前提交
93dd6b101b
共有 24 個文件被更改,包括 79 次插入26 次删除
  1. 二進制
      images/delicious.ico
  2. 6 0
      images/delicious.svg
  3. 二進制
      images/email.ico
  4. 6 0
      images/email.svg
  5. 二進制
      images/facebook.ico
  6. 4 0
      images/facebook.svg
  7. 4 0
      images/google_plus.svg
  8. 二進制
      images/googleplus.ico
  9. 二進制
      images/linkedin.ico
  10. 6 0
      images/linkedin.svg
  11. 二進制
      images/pinterest.ico
  12. 4 0
      images/pinterest.svg
  13. 二進制
      images/reddit.ico
  14. 11 0
      images/reddit.svg
  15. 二進制
      images/stumbleupon.ico
  16. 二進制
      images/taringa.ico
  17. 二進制
      images/tumblr.ico
  18. 4 0
      images/tumblr.svg
  19. 二進制
      images/twitter.ico
  20. 4 0
      images/twitter.svg
  21. 二進制
      images/vk.ico
  22. 4 0
      images/vk.svg
  23. 二進制
      images/xing.ico
  24. 26 26
      style.css

二進制
images/delicious.ico


+ 6 - 0
images/delicious.svg

@@ -0,0 +1,6 @@
+<svg role="img" aria-label="Delicious" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#FFFFFF" x="0" y="0" width="256" height="256"></rect>
+<rect fill="#333333" x="0" y="256" width="256" height="256"></rect>
+<rect fill="#EEEEEE" x="256" y="256" width="256" height="256"></rect>
+<rect fill="#3399FF" x="256" y="0" width="256" height="256"></rect>
+</svg>

二進制
images/email.ico


+ 6 - 0
images/email.svg

@@ -0,0 +1,6 @@
+<svg role="img" aria-label="Email" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#673147">
+<rect width="512" height="512" rx="15%"/>
+<rect x="56" y="111" width="400" height="290" rx="44" fill="#fff"/>
+<path d="m89 148h334v216h-334"/>
+<path d="m437 158-157 136c-16 14-32 14-48 0l-157-136m349 206-105-105m-231 105 107-107" fill="none" stroke="#fff" stroke-width="24"/>
+</svg>

二進制
images/facebook.ico


+ 4 - 0
images/facebook.svg

@@ -0,0 +1,4 @@
+<svg role="img" aria-label="Facebook" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#3b5998" height="512" rx="15%" width="512"/>
+<path d="m287 456v-299c0-21 6-35 35-35h38v-63c-7-1-29-3-55-3-54 0-91 33-91 94v306m143-254h-205v72h196" fill="#fff"/>
+</svg>

+ 4 - 0
images/google_plus.svg

@@ -0,0 +1,4 @@
+<svg role="img" aria-label="Google+" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#dd4f43" height="512" rx="15%" width="512"/>
+<path d="m56 257a126 126 0 0 1 212-96l-33 33c-21-13-49-24-75-14a80 80 0 1 0 54 151c21-8 35-28 41-48l-72-1v-44h122c1 36-3 74-27 102a127 127 0 0 1 -222-83zm327-56h36l1 37h36v37h-36l-1 36h-36v-36h-37v-37h37z" fill="#fff"/>
+</svg>

二進制
images/googleplus.ico


二進制
images/linkedin.ico


+ 6 - 0
images/linkedin.svg

@@ -0,0 +1,6 @@
+<svg role="img" aria-label="LinkedIn" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+<rect width="512" height="512" rx="15%" fill="#0077b5"/>
+<circle cx="104" cy="104" r="48"/>
+<path d="m237 178v259m-133-259v259" stroke="#fff" stroke-width="86"/>
+<path d="m279 293c0-26 18-53 48-53 31 0 43 24 43 59v138h86v-148c0-80-42-116-99-116-45 0-67 25-78 42"/>
+</svg>

二進制
images/pinterest.ico


+ 4 - 0
images/pinterest.svg

@@ -0,0 +1,4 @@
+<svg role="img" aria-label="Pinterest" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#bd081b" height="512" rx="15%" width="512"/>
+<path d="m265 56c-109 0-164 78-164 144 0 39 15 74 47 87 5 2 10 0 12-5l4-19c2-6 1-8-3-13-9-11-15-25-15-45 0-58 43-110 113-110 62 0 96 38 96 88 0 67-30 122-73 122-24 0-42-19-36-44 6-29 20-60 20-81 0-19-10-35-31-35-25 0-44 26-44 60 0 21 7 36 7 36l-30 125c-8 37-1 83 0 87 0 3 4 4 5 2 2-3 32-39 42-75l16-64c8 16 31 29 56 29 74 0 124-67 124-157 0-69-58-132-146-132z" fill="#fff"/>
+</svg>

二進制
images/reddit.ico


+ 11 - 0
images/reddit.svg

@@ -0,0 +1,11 @@
+<svg role="img" aria-label="Reddit" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ff4500">
+<rect width="512" height="512" rx="15%"/>
+<ellipse cx="256" cy="305" rx="177" ry="123" fill="#fff"/>
+<path d="m199 347c35 29 79 29 114 0l12 11c-42 35-96 35-138 0z"/>
+<circle cx="315" cy="285" r="28"/>
+<circle cx="197" cy="285" r="28"/>
+<g fill="none" stroke="#fff">
+<circle cx="390" cy="125" r="28" stroke-width="25"/>
+<path d="m87 282c-45-22-5-92 40-50m298 50c45-22 5-92-40-50m-127-45 24-83 80 16" stroke-width="22"/>
+</g>
+</svg>

二進制
images/stumbleupon.ico


二進制
images/taringa.ico


二進制
images/tumblr.ico


+ 4 - 0
images/tumblr.svg

@@ -0,0 +1,4 @@
+<svg role="img" aria-label="Tumblr" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#39475d" height="512" rx="220" width="512"/>
+<path class="cls-1" d="M373 431c-14 15-45 25-73 25h-3c-95 0-115-69-115-110V234h-37a8 8 0 0 1-8-8v-53a13 13 0 0 1 9-13c48-17 63-59 66-91 0-9 5-13 12-13h56a8 8 0 0 1 7 8v90h65a8 8 0 0 1 8 8v63a8 8 0 0 1-8 8h-65v104c0 26 17 34 28 34 10-1 20-4 25-6l10-2c3 1 5 3 6 7l17 50c2 4 3 8 0 11z" fill="#fff"/>
+</svg>

二進制
images/twitter.ico


+ 4 - 0
images/twitter.svg

@@ -0,0 +1,4 @@
+<svg role="img" aria-label="Twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#1da1f3" height="512" rx="15%" width="512"/>
+<path d="m456 133c-14 7-31 11-47 13 17-10 30-27 37-46-15 10-34 16-52 20-61-62-157-7-141 75-68-3-129-35-169-85-22 37-11 86 26 109-13 0-26-4-37-9 0 39 28 72 65 80-12 3-25 4-37 2 10 33 41 57 77 57-42 30-77 38-122 34 170 111 378-32 359-208 16-11 30-25 41-42z" fill="#fff"/>
+</svg>

二進制
images/vk.ico


+ 4 - 0
images/vk.svg

@@ -0,0 +1,4 @@
+<svg role="img" aria-label="VK" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" rx="15%" fill="#4c75a3"/>
+<path d="m275 369c6-1 15-3 15-15 0 0-1-32 14-37 15-4 34 31 54 45 15 10 26 8 26 8l54-1s28-2 15-24c-1-2-9-16-41-45-33-31-28-26 12-80 24-33 35-53 31-61-4-7-21-6-21-6h-60c-6 0-10 1-13 7 0 0-9 26-22 47-27 46-37 48-42 45-10-6-8-26-8-40 0-47 7-64-14-68-6-1-11-2-27-2-21 0-40 0-50 5-7 4-12 11-9 12 4 1 13 2 18 8 6 9 6 27 6 27s4 52-8 59c-8 4-19-5-43-46-12-21-22-45-22-45-3-7-6-8-13-10h-58c-7 0-16 1-12 14 0 0 45 105 96 158 46 48 99 45 99 45z" fill="#fff"/>
+</svg>

二進制
images/xing.ico


+ 26 - 26
style.css

@@ -73,10 +73,10 @@
 
 /* Twitter */
 .socialite-item-name-twitter {
-    background-image: url("images/twitter.ico");
+    background-image: url("images/twitter.svg");
 }
 .socialite-link-icon-twitter{
-    content:url("images/twitter.ico");
+    content:url("images/twitter.svg");
 }
 
 .socialite-link-name-twitter,
@@ -97,11 +97,11 @@ a .socialite-link-color-twitter:hover {
 
 /* Facebook */
 .socialite-item-name-facebook {
-    background-image: url("images/facebook.ico");
+    background-image: url("images/facebook.svg");
 }
 
 .socialite-link-icon-facebook{
-    content:url("images/facebook.ico");
+    content:url("images/facebook.svg");
 }
 
 .socialite-link-name-facebook,
@@ -122,11 +122,11 @@ a .socialite-link-color-facebook:hover {
 
 /* Google+ */
 .socialite-item-name-googleplus {
-    background-image: url("images/googleplus.ico");
+    background-image: url("images/google_plus.svg");
 }
 
 .socialite-link-icon-googleplus{
-    content:url("images/googleplus.ico");
+    content:url("images/googleplus.svg");
 }
 
 .socialite-link-name-googleplus,
@@ -147,11 +147,11 @@ a .socialite-link-color-googleplus:hover {
 
 /* LinkedIn */
 .socialite-item-name-linkedin {
-    background-image: url("images/linkedin.ico");
+    background-image: url("images/linkedin.svg");
 }
 
 .socialite-link-icon-linkedin{
-    content:url("images/linkedin.ico");
+    content:url("images/linkedin.svg");
 }
 
 .socialite-link-name-linkedin,
@@ -173,11 +173,11 @@ a .socialite-link-color-linkedin:hover {
 
 /* Pinterest */
 .socialite-item-name-pinterest {
-    background-image: url("images/pinterest.ico");
+    background-image: url("images/pinterest.svg");
 }
 
 .socialite-link-icon-pinterest{
-    content:url("images/pinterest.ico");
+    content:url("images/pinterest.svg");
 }
 
 .socialite-link-name-pinterest,
@@ -198,11 +198,11 @@ a .socialite-link-color-pinterest:hover {
 
 /* Tumblr */
 .socialite-item-name-tumblr {
-    background-image: url("images/tumblr.ico");
+    background-image: url("images/tumblr.svg");
 }
 
 .socialite-link-icon-tumblr{
-    content:url("images/tumblr.ico");
+    content:url("images/tumblr.svg");
 }
 
 .socialite-link-name-tumblr,
@@ -223,11 +223,11 @@ a .socialite-link-color-tumblr:hover {
 
 /* Reddit */
 .socialite-item-name-reddit {
-    background-image: url("images/reddit.ico");
+    background-image: url("images/reddit.svg");
 }
 
 .socialite-link-icon-reddit{
-    content:url("images/reddit.ico");
+    content:url("images/reddit.svg");
 }
 
 .socialite-link-name-reddit,
@@ -248,11 +248,11 @@ a .socialite-link-color-reddit:hover {
 
 /* Taringa */
 .socialite-item-name-taringa {
-    background-image: url("images/taringa.ico");
+    background-image: url("images/taringa.svg");
 }
 
 .socialite-link-icon-taringa{
-    content:url("images/taringa.ico");
+    content:url("images/taringa.svg");
 }
 
 .socialite-link-name-taringa,
@@ -273,11 +273,11 @@ a .socialite-link-color-taringa:hover {
 
 /*  Delicious*/
 .socialite-item-name-delicious {
-    background-image: url("images/delicious.ico");
+    background-image: url("images/delicious.svg");
 }
 
 .socialite-link-icon-delicious{
-    content:url("images/delicious.ico");
+    content:url("images/delicious.svg");
 }
 
 .socialite-link-name-delicious,
@@ -298,11 +298,11 @@ a .socialite-link-color-delicious:hover {
 
 /*  StumbleUpon*/
 .socialite-item-name-stumbleupon {
-    background-image: url("images/stumbleupon.ico");
+    background-image: url("images/stumbleupon.svg");
 }
 
 .socialite-link-icon-stumbleupon{
-    content:url("images/stumbleupon.ico");
+    content:url("images/stumbleupon.svg");
 }
 
 .socialite-link-name-stumbleupon,
@@ -323,11 +323,11 @@ a .socialite-link-color-stumbleupon:hover {
 
 /* Xing */
 .socialite-item-name-xing {
-    background-image: url("images/xing.ico");
+    background-image: url("images/xing.svg");
 }
 
 .socialite-link-icon-xing{
-    content:url("images/xing.ico");
+    content:url("images/xing.svg");
 }
 
 .socialite-link-name-xing,
@@ -348,11 +348,11 @@ a .socialite-link-color-xing:hover {
 
 /* Vk */
 .socialite-item-name-vk {
-    background-image: url("images/vk.ico");
+    background-image: url("images/vk.svg");
 }
 
 .socialite-link-icon-vk{
-    content:url("images/vk.ico");
+    content:url("images/vk.svg");
 }
 
 .socialite-link-name-vk,
@@ -373,11 +373,11 @@ a .socialite-link-color-vk:hover {
 
 /* Email */
 .socialite-item-name-email {
-    background-image: url("images/email.ico");
+    background-image: url("images/email.svg");
 }
 
 .socialite-link-icon-email{
-    content:url("images/email.ico");
+    content:url("images/email.svg");
 }
 
 .socialite-link-name-email,