{"id":30,"date":"2007-06-05T23:42:49","date_gmt":"2007-06-05T18:12:49","guid":{"rendered":"http:\/\/www.bin-co.com\/blog\/2007\/06\/iconify-links-with-css\/"},"modified":"2007-06-05T23:42:49","modified_gmt":"2007-06-05T18:12:49","slug":"iconify-links-with-css","status":"publish","type":"post","link":"https:\/\/www.bin-co.com\/blog\/2007\/06\/iconify-links-with-css\/","title":{"rendered":"Iconify Links with CSS"},"content":{"rendered":"

Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty<\/a>. When I was creating Nexty, I learned<\/a> a simple trick that made using icons with CSS much easier.<\/p>\n

Go to Nexty<\/a> to see the icons<\/p>\n

Iconification of Links in Nexty<\/p>\n

3 Types of Icons<\/h2>\n

I used 3 different classes for showing icons. They are..<\/p>\n

icon<\/h3>\n

This class removes the text of the link and put the icon in its place. The icon is clickable.<\/p>\n

You can see this technique used in the Projects page<\/a>. See that ‘Edit'(Pencil) and ‘Delete’ icons? They use this class.<\/p>\n

XHTML code<\/h4>\n
<a class=\"icon edit\" href=\"edit.php?project=6\">Rename<a><\/code><\/pre>\n
CSS Code<\/h4>\n
.icon {\n\tfont-size:0px; \/*Hides the text*\/\n\tpadding:6px 8px;\n}\n.edit {\n\tbackground:url(edit.png) no-repeat left center;\n}<\/code><\/pre>\n
with-icon<\/h3>\n
This class shows the icon left of the link text. Both the icon and the text are clickable.<\/p>\n
The ‘Create new task’ link in the home page<\/a> is an example of this.<\/p>\n
XHTML code<\/h4>\n
<a class=\"with-icon tasks\" href=\"tasks\/new.php\">Create New Task...<\/a><\/code><\/pre>\n
CSS Code<\/h4>\n
\n.with-icon {\n\tpadding-left:18px;\n}\n.tasks {\n\tbackground:url(tasks.png) no-repeat left center;\n}\n<\/code><\/pre>\n
list-with-icon<\/h3>\n
This will insert the icon in every item for the given list.<\/p>\n
The drop down menus – Sections, Projects and Contexts are created using this technique.<\/p>\n
XHTML code<\/h4>\n
<ul class=\"menu-with-icon projects\">\n<li>...<\/li>\n<li>...<\/li>\n<\/ul><\/code><\/pre>\n
CSS Code<\/h4>\n
\n.list-with-icon li,.list-with-icon dt {\n\tpadding-left:18px;\n}\n.projects li {\n\tbackground:url(projects.png) no-repeat left center;\n}\n<\/code><\/pre>\n
Icon Size<\/h2>\n
My icons were 16×16 pixels – if you are using icons with a different size, you will have to change the amount accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"
Using icons is a must for all Web 2.0 apps. I have used this principle liberally in Nexty. When I was creating Nexty, I learned […]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,9,29,30],"tags":[87,142,144,172,194],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-xhtml","category-css","category-web20","category-web-development","tag-css","tag-icons","tag-iis","tag-links","tag-nexty"],"_links":{"self":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":0,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bin-co.com\/blog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}