advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

j_junyent on 11/25/07


Tagged

links


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

SpinZ
aziz


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/Attach_icons_to_anything_with_CSS


Plain TextExpand 
  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.