Posted By

j_junyent on 11/25/07


Tagged

links


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

SpinZ
aziz
asturi
Nerdlr
McWatt
roybatty


Style links


 / Published in: CSS
 

URL: http://pooliestudios.com/projects/iconize/

Style external links.

Inspired by: http://pooliestudios.com/projects/iconize/ and http://www.hunlock.com/blogs/Attachiconstoanythingwith_CSS

  1. // External links
  2. a[href^="http:"] {
  3. display:inline-block;
  4. padding-right:14px;
  5. background:transparent url(/images/external.png) center right no-repeat;
  6. }
  7.  
  8. // Comunication: Email, IM, VOIP...
  9. a[href^="mailto:"], a[href*="@"] {
  10. display:inline-block;
  11. padding-left:20px;
  12. line-height:18px;
  13. background:transparent url(/images/email.png) center left no-repeat;
  14. }
  15.  
  16. a[href ^="aim:"] {
  17. display:inline-block;
  18. padding-left:20px;
  19. line-height:18px;
  20. background:transparent url(/images/aim.png) center left no-repeat;
  21. }
  22.  
  23. a[href ^="msnim:"] {
  24. display:inline-block;
  25. padding-left:20px;
  26. line-height:18px;
  27. background:transparent url(/images/msn.png) center left no-repeat;
  28. }
  29.  
  30. a[href ^="xmpp:"] {
  31. display:inline-block;
  32. padding-left:20px;
  33. line-height:18px;
  34. background:transparent url(/images/jabber.png) center left no-repeat;
  35. }
  36.  
  37. a[href *="icq.com"] {
  38. display:inline-block;
  39. padding-left:20px;
  40. line-height:18px;
  41. background:transparent url(/images/icq.png) center left no-repeat;
  42. }
  43.  
  44. a[href *="edit.yahoo.com/config/send_webmesg?"] {
  45. display:inline-block;
  46. padding-left:20px;
  47. line-height:18px;
  48. background:transparent url(/images/yahoo.png) center left no-repeat;
  49. }
  50.  
  51. a[href ^="callto:"] {
  52. display:inline-block;
  53. padding-left:20px;
  54. line-height:18px;
  55. background:transparent url(/images/call.png) center left no-repeat;
  56. }
  57.  
  58. a[href ^="skype:"] {
  59. display:inline-block;
  60. padding-left:20px;
  61. line-height:18px;
  62. background:transparent url(/images/skype.png) center left no-repeat;
  63. }
  64.  
  65. // Blogging
  66. a[href*="trackback"] {
  67. display:inline-block;
  68. padding-left:20px;
  69. line-height:18px;
  70. background:transparent url(/images/link.png) center right no-repeat;
  71. }
  72.  
  73. a[href*="postcomment"], a[href*="respond"] {
  74. display:inline-block;
  75. padding-left:20px;
  76. line-height:18px;
  77. background:transparent url(/images/comment.png) center right no-repeat;
  78. }
  79.  
  80. a[href*="action=edit"] {
  81. display:inline-block;
  82. padding-left:20px;
  83. line-height:18px;
  84. background:transparent url(/images/page_white_edit.png) center left no-repeat;
  85. }
  86.  
  87. // RSS Feeds
  88. a[href*="rss2"], a[href*="feed"], a[href$='.rss'], a[href$='.atom'] {
  89. display:inline-block;
  90. padding-left:20px;
  91. line-height:18px;
  92. background:transparent url(/images/rss.png) center right no-repeat;
  93. }
  94. a[href$='.opml'] {
  95. display:inline-block;
  96. padding-left:20px;
  97. line-height:18px;
  98. background:transparent url(/images/opml.png) center right no-repeat;
  99. }
  100.  
  101. // Office documents
  102. a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'], a[href$='.xlsx'], a[href$='.ods'] {
  103. display:inline-block;
  104. padding-left:20px;
  105. line-height:18px;
  106. background:transparent url(/images/page_white_excel.png) center left no-repeat;
  107. }
  108.  
  109. a[href$='.ppt'], a[href$='.pps'] {
  110. display:inline-block;
  111. padding-left:20px;
  112. line-height:18px;
  113. background:transparent url(/images/PowerPointIcon.gif) center left no-repeat;
  114. }
  115.  
  116. a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'], a[href$='.odt'], a[href$='.docx'] {
  117. display:inline-block;
  118. padding-left:20px;
  119. line-height:18px;
  120. background:transparent url(/images/page_white_word.png) center left no-repeat;
  121. }
  122. // Text
  123. a[href$='.txt'] {
  124. display:inline-block;
  125. padding-left:20px;
  126. line-height:18px;
  127. background:transparent url(/images/page_white_text.png) center left no-repeat;
  128. }
  129. // PDF
  130. a[href$='.pdf'] {
  131. display:inline-block;
  132. padding-left:20px;
  133. line-height:18px;
  134. background:transparent url(/images/page_white_acrobat.png) center left no-repeat;
  135. }
  136. // Compressed files
  137. a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'], a[href$='.ace'], a[href$='.tar.gz'], a[href$='.tgz'] {
  138. display:inline-block;
  139. padding-left:20px;
  140. line-height:18px;
  141. background:transparent url(/images/page_white_compressed.png) center left no-repeat;
  142. }
  143. // Audio
  144. a[href$='.mp3'], a[href$='.aiff'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.flac'], a[href$='.m4a'] {
  145. display:inline-block;
  146. padding-left:20px;
  147. line-height:18px;
  148. background:transparent url(/images/music.png) center left no-repeat;
  149. }
  150. // Video
  151. a[href$='.mpg'], a[href$='.mpeg'], a[href$='.avi'], a[href$='.mv2'], a[href$='.mov'], a[href$='.mp4'], a[href$='.wmv'] {
  152. display:inline-block;
  153. padding-left:20px;
  154. line-height:18px;
  155. background:transparent url(/images/film.png) center left no-repeat;
  156. }
  157. // Photo
  158. a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] {
  159. display:inline-block;
  160. padding-left:20px;
  161. line-height:18px;
  162. background:transparent url(/images/photo.png) center left no-repeat;
  163. }
  164. // Flash
  165. a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] {
  166. display:inline-block;
  167. padding-left:20px;
  168. line-height:18px;
  169. background:transparent url(/images/page_white_flash.png) center left no-repeat;
  170. }
  171. // Apps: Exe, dmg, apps, xpi...
  172. a[href$='.exe'] {
  173. display:inline-block;
  174. padding-left:20px;
  175. line-height:18px;
  176. background:transparent url(/images/exe_file.png) center left no-repeat;
  177. }
  178.  
  179. a[href$='.dmg'], a[href$='.app'] {
  180. display:inline-block;
  181. padding-left:20px;
  182. line-height:18px;
  183. background:transparent url(/images/dmg_file.png) center left no-repeat;
  184. }
  185.  
  186. a[href$='.xpi'] {
  187. display:inline-block;
  188. padding-left:20px;
  189. line-height:18px;
  190. background:transparent url(/images/xpi_file.png) center left no-repeat;
  191. }
  192. // vCard
  193. a[href$='.vcard'] {
  194. display:inline-block;
  195. padding-left:20px;
  196. line-height:18px;
  197. background:transparent url(/images/vcard.png) center left no-repeat;
  198. }
  199. // iCal
  200. a[href$='.ical'] {
  201. display:inline-block;
  202. padding-left:20px;
  203. line-height:18px;
  204. background:transparent url(/images/ical.png) center left no-repeat;
  205. }
  206. // TTF
  207. a[href$='.ttf'] {
  208. display:inline-block;
  209. padding-left:20px;
  210. line-height:18px;
  211. background:transparent url(/images/ttf.png) center left no-repeat;
  212. }
  213. // CSS
  214. a[href$='.css'] {
  215. display:inline-block;
  216. padding-left:20px;
  217. line-height:18px;
  218. background:transparent url(/images/css.png) center left no-repeat;
  219. }
  220. // Web 2 . 0
  221. a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] {
  222. display:inline-block;
  223. padding-left:20px;
  224. line-height:18px;
  225. background:transparent url(/images/film.png) center left no-repeat;
  226. }
  227.  
  228. a[href *="flickr.com/photos/"], a[href *="zooomr.com"], a[href *="imageshack.us"], a[href *="bubbleshare.com"], a[href *="sevenload.com/bilder/"] {
  229. display:inline-block;
  230. padding-left:20px;
  231. line-height:18px;
  232. background:transparent url(/images/photo.png) center left no-repeat;
  233. }
  234.  
  235. /* making sure images don't get icons */
  236.  
  237. .imageLink {
  238. padding-right: 0px !important;
  239. background: none !important;
  240. }

Report this snippet  

You need to login to post a comment.