Post Archive
› February 5, 2002
micro icons
I tried making some micro icons for use inline with link text. Let's see how they work:
sample outside link icon (7x8)
sample email link (7x5)
sample pdf link (7x8)
I'm not sure if these will work, but if you like 'em, save 'em for your use or improvement. The idea for this is based off of qbullets, but smaller and less distracting (hopefully). The gifs here are transparent, but will probably only work on the lightest of background colors.
Comments
1. February 6, 2002 03:17 AM
2. February 6, 2002 07:57 AM
Quote this comment
Nate Posted…
Yes, I was thinking about the microsoft one, which I found quite clunky and distracting. You're right about understanding them - especially at this size... I'm not sure these would be something I'd personally use in regular body copy because the need for context exists with or without them. This was more a quick excersize in making icons tiny enough to work with the small font size used on this site (currently). Having them auto insterted in the appropriate places would be more interesting, especially in terms of the consistency issue you mentioned - but unless I'm mistaken, this couldn't currently be done just via css, it would probably require some scripting. Hmmm....3. February 6, 2002 04:47 PM
Quote this comment
Paul Sowden Posted…
"but unless I'm mistaken, this couldn't currently be done just via css" You could do some of it using CSS. If you add the icon as a background image using padding to allow space for it. You could then check a couple of attributes: a[target=_blank] /* check new windows */ a[type=application/pdf] /* if you use the type attribute you could do this */ I can't think of anyway to differentiate between mail links and hypertext links though. Scripting would be the easy way out :-)4. February 7, 2002 04:28 AM
Quote this comment
nolo Posted…
I can't understand the PDF icon, but the others make sense immediately.5. February 7, 2002 07:02 AM
Quote this comment
Paul - the first link was actually intended to indicate a link from another domain (although new window link makes sense for it too). I'm impressed with the css method you've mentioned - especially the filtering for type=application/pdf. I suppose this could be a handy way for iconizing all sorts of non html based docs like music, movies, etc.
Nate Posted…
Nolo - I agree about the pdf icon, it's too small to translate.Paul - the first link was actually intended to indicate a link from another domain (although new window link makes sense for it too). I'm impressed with the css method you've mentioned - especially the filtering for type=application/pdf. I suppose this could be a handy way for iconizing all sorts of non html based docs like music, movies, etc.
6. February 7, 2002 09:15 AM
Quote this comment
(email reprinted as the CSS-discuss archives are subscriber-only.)
Date: Wed, 6 Feb 2002 14:07:18 -0800 (PST)
To: css-discuss@westciv.com Subject: [css-d] background-image appends whitespace in ns4x?
hi everyone,
i have a list of links on a page as a bulleted list. (anchor tag, break, anchor tag, break) i want the bullets to be an arrow(gif). since list-item-style doesnt work in ns4x, i thought it would be a good idea to specify my aroow as the background image for this particular type of anchor tags, and set to no-repeat. this would eliminate some markup, which is always cool. it worked across the required browsers: ns4x, ns6x, ie5+. the only problem is that ns4x seems to append approx 20 px after each link that uses the bkg img. has anyone else experienced this? is there a way around this?
francois Posted…
I thought Paul's suggestion was very intriguing. I just came across the following in the CSS-discuss list which describes a similar technique, in this case used for custom bullets. It also mentions a problem in -- surprise -- NN4.x.(email reprinted as the CSS-discuss archives are subscriber-only.)
Date: Wed, 6 Feb 2002 14:07:18 -0800 (PST)
To: css-discuss@westciv.com Subject: [css-d] background-image appends whitespace in ns4x?
hi everyone,
i have a list of links on a page as a bulleted list. (anchor tag, break, anchor tag, break) i want the bullets to be an arrow(gif). since list-item-style doesnt work in ns4x, i thought it would be a good idea to specify my aroow as the background image for this particular type of anchor tags, and set to no-repeat. this would eliminate some markup, which is always cool. it worked across the required browsers: ns4x, ns6x, ie5+. the only problem is that ns4x seems to append approx 20 px after each link that uses the bkg img. has anyone else experienced this? is there a way around this?
7. April 5, 2002 07:39 AM
Quote this comment
Richard Evans Lee Posted…
Many thanks for the icons and icon links. Nothing I could design myself.8. April 27, 2002 06:14 AM
Quote this comment
Paco Posted…
Well9. June 9, 2002 12:33 PM
Quote this comment
axe Posted…
very beautiful work!10. June 13, 2002 08:31 AM
Quote this comment
Dilip Posted…
I Need some icon of sitemap Thanks11. August 25, 2002 02:16 PM
Quote this comment
camilo Posted…
none12. May 6, 2003 06:35 AM
Quote this comment
Richie Posted…
Thank you for making these nice micro icons available. I've been using QBullets and they can be quite distracting. [I found your site by-way-of adot's notblog.]13. July 28, 2004 10:17 AM
Quote this comment
daveeee Posted…
I've been making some icons, about 16x16. will post when finished.
14. August 25, 2004 02:56 PM
15. January 28, 2005 04:08 PM
Quote this comment
Colin Posted…
Obviously, this is way after the fact, but a specific file type extension (ie: PDF files) can be singled out with the following CSS3 selector, which works fine in Firefox 1.0 and presumably the equivalent Mozilla version... #content a[href*=".pdf"].
16. March 6, 2005 12:55 PM
17. May 28, 2005 12:36 PM
Quote this comment
jordan willms Posted…
Just wanted to say thanks. I've added your three images to my collection of small web icons at http://www.jordanwillms.com/
Obivously I give credit where credit is due. Thanks kindly from the web dev community! ..jay
18. April 16, 2006 08:46 AM
Quote this comment
francois Posted…
Like most icons, their meaning can probably only be decoded in context, and only becomes useful by consistent application. The 'outside link' icon is one I may well adopt.I take it you are following the discussion on this subject at CHI-WEB, which was the first I heard of qbullets. I'm also aware of a collection of free, "standard" icons from IBM although it doesn't include 'outside link'. Microsoft's site, as I recall, always used a little arrow pointing at a globe. I don't know if they still use it, or whether it's public domain.