where to apply icons ?

JohnG - April 25, 2007 - 12:19
Project:icontheme
Version:5.x-1.x-dev
Component:Miscellaneous
Category:feature request
Priority:normal
Assigned:Unassigned
Status:active
Description

This isn't really a feature request - just some ideas for discussion on what we would use icons for:

  1. I would like to see the 'function' links like 'print', 'edit', 'save', 'comment', 'reply' etc etc replaced with icons as this helps to distinguish them from ordinary 'content reference' links ('view' page x). I keep thinking of PHPmyAdmin's interface :-)
  2. Another popular use for icons is for (attachment) file types - pdfs, jpegs, word docs, etc. Within Drupal this might compare to different content-type names (eg event, location) with field labels (eg dates, geoposition) which could benefit from icon-identification via their respective modules / CCK ... I suppose a 'comment' is a kind of content-type ... ?
  3. 'Information' or 'Help' icons could be usefully combined with AJAX to hide/show help text (eg for edit form fields).
  4. And of course emoticons :-) though these are only used in content ... AFAIK TinyMCE etc already has widgets for that kind of thing.

I for one would be interested to hear about other sensible places to use icons ... any thoughts ?

#1

JohnG - April 25, 2007 - 14:58

hehe ... I've just thought of a neat idea: for a link to a page on another site, get the other site's favicon (if it has one) and use it as the link icon ... :-)

#2

ray007 - April 25, 2007 - 20:56

There already is a module decorating external links with favicons ... but yes, links should have an icon too ;-)

#3

JohnG - April 28, 2007 - 11:40

thanks Ray - so there is! it took me a while to find, but in the process I noticed how many contrib modules are used to do different icon things ... so here's a quick round-up:

  • Context Links module allows you to easily create links to context-related material using a simple markup syntax. The links are indicated by either linking the text itself or by inserting a specific string or icon that links to the related information.
  • External Links is a small module used to differentiate between internal and external links. Using jQuery, it will find all external links on a page and add a small icon indicating it will take you offsite. You may optionally make all external links open in a new window.
  • Outgoing links filter This is a simple filter that adds in a configurable CSS classname to all outgoing links (e.g., links that point to a *different* website). What's so useful about that? Well you can then easily add a little icon next to each link indicating that it takes you to a different site. Or you can use some unobtrusive JavaScript to hook in some useful effects, warnings, or whatever you want.
  • URL icon Display URLs with corresponding favicon. A simple filter which checks the content for <a>-elements and automatically fetches and stores the corresponding favicon.ico if available. Generates and stores a CSS-file to stick the favicon to the URL at display time.
  • User Badges module allows each user to be assigned 'badges' which can be displayed as a series of iconic images. A common use will probably be to display the badges along with the user's information within forums, comments, or node postings. These badges can be assigned individually by the administrator or attached to a role so that, for example, all users in the 'admin' role will show the 'Administrator' badge which could display as a graphic letter 'A'.

From this I can see how an iconification API might well draw support from all these module maintainers/ developers. I can also picture an icon.module (including the API) which would be the basis for a number of 'plug-in' modules for various iconfication functions ... ?

One thing they all seem to have in common is 'themeing' links. Can anyone thing of a case where an icon would be used for anything that isn't (part of) a link?

#4

ray007 - April 28, 2007 - 16:48

I don't think we would need plugins, we just need to extend the namespaces for the need of various modules.

And I think many icons would be in place without having a link in them as they are mostly decoration. Menuitems, titles of block and nodes and ..., sections in a form, each inputfield in a form could have its icon.

Decorating a link with the favicon of the targetsite probably can't profit from theming here (except maybe for a fallback icon), but the other modules sure could.

#5

JohnG - April 29, 2007 - 17:39

@ #4.2 iconic decoration ... hmm; yes, I can see how 'attribute' or 'metatag' icons can be useful in non-link areas.

I'm a little bit alarmed by the word 'decoration' ;-) ... IMO the main purpose of icons is they are recognised at a glance, and have a consistent meaning through-out a given website (at least) - a kind of informatic visual short-hand. This is quite different from 'decoration' whose effect is to distract or make the eye linger. Am I being to narrow minded about this ?

Node_title icons: eg content-type, updated, unpublished, unmoderated, etc. As a node_title is content, it would never be entirely replaced by an icon ?

Block_title icons : interesting idea ... eg display user role 'badges' in the Navigation block_title ? or, as blocks are often module-specific, show an icon denoting the module eg taxonomy ?... would you ever want to use an icon to entirely replace a block_title ?

Form_element_label icons : are you thinking of recurring form items like a 'Postal Address' fieldset legend, a 'Phone Number' field label, a 'Birthday' field label ... etc ? (are these not something like XML datatypes ... ?)

#6

ray007 - April 29, 2007 - 17:56

Well, whether it's 'visual shorthand' or 'distraction' probably depends on the viewer ...

And I think the title shouldn't be replaced by the icon (at least not normally), but the icon displayed near the title.

And you already bring some nice examples for icon usage with form elements ;-)
Those icons don't have to be recurring, but a little telephone icon beside all phone-number fields is one of the things this is meant for.

#7

JohnG - May 1, 2007 - 11:56

Prefixing labels with icons is a relatively easy CSS theming task : I've started a couple of CSS iconification tutorials in the theming handbook.
Replacing labels (strings) with icons using CSS is not so easy ...

#8

ray007 - May 1, 2007 - 21:27

Yes.
And icontheme is not about "how to get the icon there", but about "which icon shall we use"?
In some cases you may know exactly which image you want to use, but in many cases an intelligent icon-chooser could help a lot ...

#9

neomenlo - January 13, 2008 - 05:58

You've missed some important .css ways to implement icons.

This will ad them based on the ending of the url:
a[href $='.pdf'] { }

This will only apply the style to things matching the beginning of the url:
a[href ^="mailto:"] { }

 
 

Drupal is a registered trademark of Dries Buytaert.