{"id":22,"date":"2007-05-18T12:39:54","date_gmt":"2007-05-18T16:39:54","guid":{"rendered":"http:\/\/ryepup.unwashedmeme.com\/blog\/2007\/05\/18\/pretty-icons-using-css-and-mark-james-silk-icons\/"},"modified":"2007-05-18T12:39:54","modified_gmt":"2007-05-18T16:39:54","slug":"pretty-icons-using-css-and-mark-james-silk-icons","status":"publish","type":"post","link":"http:\/\/ryepup.unwashedmeme.com\/blog\/2007\/05\/18\/pretty-icons-using-css-and-mark-james-silk-icons\/","title":{"rendered":"Pretty icons using CSS and Mark James’ Silk Icons"},"content":{"rendered":"

I recently saw a post via reddit on Rediscovering the button element<\/a> about making nice buttons with little icons, and was introduced to the Silk Icons<\/a> available from Mark James<\/a>. Mark has released these under a Creative Commons Attribution<\/a> license, any my UIs will be better for it.\n<\/p>\n

\nI went through last night and gave a little face-lift to one of my intranet projects, and it looks a lot<\/strong> nicer now. I added icons to buttons and links using CSS.<\/p>\n

Here’s the css I used:
\n[css]
\n.icon
\n{
\n\tbackground-repeat:no-repeat;
\n\tpadding-left:20px;
\n}<\/p>\n

.delete-icon
\n{
\n\tbackground-image:url(‘icons\/cross.png’);
\n}<\/p>\n

.edit-icon
\n{
\n\tbackground-image:url(‘icons\/pencil.png’);
\n}<\/p>\n

[\/css]
\nand so forth, with a *-icon<\/code> for the different icons I wanted. Then, I decorated my buttons, links, and what-have-you by adding a class=\"icon foo-icon\"<\/code> 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:<\/p>\n

\n\"Silk\"Silk\"Silk\n<\/div>\n<\/p>\n

\nThanks a lot, Mark!<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,10,8],"tags":[],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-code-snippet","category-design","category-open-source"],"_links":{"self":[{"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":0,"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"wp:attachment":[{"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ryepup.unwashedmeme.com\/blog\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}