Posted By

dcoxdesigns on 09/18/12


Tagged

css icon


Versions (?)

Iconizer


 / Published in: CSS
 

put tiny icons next to media types like PDF, music and email. Inline with text.

Need to include images
  1. /* Iconize 0.5 */
  2.  
  3. /* websites (pictures and movies) */
  4. a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] {
  5. padding: 5px 20px 5px 0;
  6. background: transparent url(icons/icon_film.gif) no-repeat center right;
  7. }
  8.  
  9. a[href *="flickr.com/photos/"], a[href *="zooomr.com"], a[href *="imageshack.us"], a[href *="bubbleshare.com"], a[href *="sevenload.com/bilder/"] {
  10. padding: 5px 20px 5px 0;
  11. background: transparent url(icons/icon_pic.gif) no-repeat center right;
  12. }
  13.  
  14. /* extensions */
  15.  
  16. a[href$='.doc'], a[href$='.rtf'] {
  17. padding: 5px 20px 5px 0;
  18. background: transparent url(icons/icon_doc.gif) no-repeat center right;
  19. }
  20.  
  21. a[href$='.txt'] {
  22. padding: 5px 20px 5px 0;
  23. background: transparent url(icons/icon_txt.gif) no-repeat center right;
  24. }
  25.  
  26. a[href$='.xls'] {
  27. padding: 5px 20px 5px 0;
  28. background: transparent url(icons/icon_xls.gif) no-repeat center right;
  29. }
  30.  
  31. a[href$='.rss'], a[href$='.atom'] {
  32. padding: 5px 20px 5px 0;
  33. background: transparent url(icons/icon_feed.gif) no-repeat center right;
  34. }
  35.  
  36. a[href$='.opml'] {
  37. padding: 5px 20px 5px 0;
  38. background: transparent url(icons/icon_opml.gif) no-repeat center right;
  39. }
  40.  
  41. a[href$='.phps'] {
  42. padding: 5px 20px 5px 0;
  43. background: transparent url(icons/icon_phps.gif) no-repeat center right;
  44. }
  45.  
  46. a[href$='.phps'] {
  47. padding: 5px 20px 5px 0;
  48. background: transparent url(icons/icon_phps.gif) no-repeat center right;
  49. }
  50.  
  51. a[href$='.torrent'] {
  52. padding: 5px 20px 5px 0;
  53. background: transparent url(icons/icon_torrent.gif) no-repeat center right;
  54. }
  55.  
  56. a[href$='.vcard'] {
  57. padding: 5px 20px 5px 0;
  58. background: transparent url(icons/icon_vcard.gif) no-repeat center right;
  59. }
  60.  
  61. a[href$='.exe'] {
  62. padding: 5px 20px 5px 0;
  63. background: transparent url(icons/icon_exe.gif) no-repeat center right;
  64. }
  65.  
  66. a[href$='.dmg'], a[href$='.app'] {
  67. padding: 5px 20px 5px 0;
  68. background: transparent url(icons/icon_dmg.gif) no-repeat center right;
  69. }
  70.  
  71. a[href$='.pps'] {
  72. padding: 5px 20px 5px 0;
  73. background: transparent url(icons/icon_pps.gif) no-repeat center right;
  74. }
  75.  
  76. a[href$='.pdf'] {
  77. padding: 5px 20px 5px 0;
  78. background: transparent url(icons/icon_pdf.gif) no-repeat center right;
  79. }
  80.  
  81. a[href$='.xpi'] {
  82. padding: 5px 20px 5px 0;
  83. background: transparent url(icons/icon_plugin.gif) no-repeat center right;
  84. }
  85.  
  86. a[href$='.fla'], a[href$='.swf'] {
  87. padding: 5px 20px 5px 0;
  88. background: transparent url(icons/icon_flash.gif) no-repeat center right;
  89. }
  90.  
  91. a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] {
  92. padding: 5px 20px 5px 0;
  93. background: transparent url(icons/icon_archive.gif) no-repeat center right;
  94. }
  95.  
  96. a[href$='.ical'] {
  97. padding: 5px 20px 5px 0;
  98. background: transparent url(icons/icon_ical.gif) no-repeat center right;
  99. }
  100.  
  101. a[href$='.css'] {
  102. padding: 5px 20px 5px 0;
  103. background: transparent url(icons/icon_css.gif) no-repeat center right;
  104. }
  105.  
  106. a[href$='.ttf'] {
  107. padding: 5px 20px 5px 0;
  108. background: transparent url(icons/icon_ttf.gif) no-repeat center right;
  109. }
  110.  
  111. a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] {
  112. padding: 5px 20px 5px 0;
  113. background: transparent url(icons/icon_pic.gif) no-repeat center right;
  114. }
  115.  
  116. a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] {
  117. padding: 5px 20px 5px 0;
  118. background: transparent url(icons/icon_film.gif) no-repeat center right;
  119. }
  120.  
  121. a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] {
  122. padding: 5px 20px 5px 0;
  123. background: transparent url(icons/icon_music.gif) no-repeat center right;
  124. }
  125.  
  126. /* messenger */
  127. a[href ^="aim:"] {
  128. padding: 5px 20px 5px 0;
  129. background: transparent url(icons/icon_aim.gif) no-repeat center right;
  130. }
  131.  
  132. a[href ^="msnim:"] {
  133. padding: 5px 20px 5px 0;
  134. background: transparent url(icons/icon_msn.gif) no-repeat center right;
  135. }
  136.  
  137. a[href ^="xmpp:"] {
  138. padding: 5px 20px 5px 0;
  139. background: transparent url(icons/icon_jabber.gif) no-repeat center right;
  140. }
  141.  
  142. a[href *="icq.com"] {
  143. padding: 5px 20px 5px 0;
  144. background: transparent url(icons/icon_icq.gif) no-repeat center right;
  145. }
  146.  
  147. a[href *="edit.yahoo.com/config/send_webmesg?"] {
  148. padding: 5px 20px 5px 0;
  149. background: transparent url(icons/icon_yim.gif) no-repeat center right;
  150. }
  151.  
  152. a[href ^="callto:"] {
  153. padding: 5px 20px 5px 0;
  154. background: transparent url(icons/icon_call.gif) no-repeat center right;
  155. }
  156.  
  157. a[href ^="skype:"] {
  158. padding: 5px 20px 5px 0;
  159. background: transparent url(icons/icon_skype.gif) no-repeat center right;
  160. }
  161.  
  162. a[href ^="gg:"] {
  163. padding: 5px 20px 5px 0;
  164. background: transparent url(icons/icon_gadugadu.gif) no-repeat center right;
  165. }
  166.  
  167. /* email */
  168. a[href ^="mailto:"] {
  169. padding: 5px 20px 5px 0;
  170. background: transparent url(icons/icon_mailto.gif) no-repeat center right;
  171. }
  172.  
  173. /* use this class to make sure that images won't get iconized */
  174.  
  175. .imageLink {
  176. padding-right: 0px !important;
  177. background: none !important;
  178. }

Report this snippet  

You need to login to post a comment.