Ryan's Tech Blog » design http://ryepup.unwashedmeme.com/blog mostly tech, mostly rants Wed, 04 Jan 2012 03:42:20 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Pretty icons using CSS and Mark James’ Silk Icons http://ryepup.unwashedmeme.com/blog/2007/05/18/pretty-icons-using-css-and-mark-james-silk-icons/ http://ryepup.unwashedmeme.com/blog/2007/05/18/pretty-icons-using-css-and-mark-james-silk-icons/#comments Fri, 18 May 2007 16:39:54 +0000 ryan http://ryepup.unwashedmeme.com/blog/2007/05/18/pretty-icons-using-css-and-mark-james-silk-icons/ I recently saw a post via reddit on Rediscovering the button element about making nice buttons with little icons, and was introduced to the Silk Icons available from Mark James. Mark has released these under a Creative Commons Attribution license, any my UIs will be better for it.

I went through last night and gave a little face-lift to one of my intranet projects, and it looks a lot nicer now. I added icons to buttons and links using CSS.

Here's the css I used:

PLAIN TEXT
CSS:
  1. .icon
  2. {
  3.     background-repeat:no-repeat;   
  4.     padding-left:20px;
  5. }
  6.  
  7. .delete-icon
  8. {
  9.     background-image:url('icons/cross.png');
  10. }
  11.  
  12. .edit-icon
  13. {
  14.     background-image:url('icons/pencil.png');
  15. }

and so forth, with a *-icon for the different icons I wanted. Then, I decorated my buttons, links, and what-have-you by adding a class="icon foo-icon" attribute. There are other ways accomplish that with CSS, but I liked this scheme the best. In the end, I have added nothing significant to the markup, but made everything else look a lot nicer:

Silk icon example 3Silk icon example 2Silk icon example

Thanks a lot, Mark!

]]> http://ryepup.unwashedmeme.com/blog/2007/05/18/pretty-icons-using-css-and-mark-james-silk-icons/feed/ 0