Account services

Where do the little icons come from?

Link types are automatically detected on client side by some Javascript, which will add the necessary class icon before the link. The intention is to inform the user about what he can expect will happen before he clicks on the link. Consistency and predictability enhance usability.

Here you see some examples:

Icons based on protocols

The icons will only show up on the main content area - not in the left and right columns.

If you don't want the icon to show, then add class="link-plain" to the <a> tag. The code <a class="link-plain" href="http://www.externalsite.eu/document.pdf">PDF Document</a> will show as PDF Document.

Some popular file extensions

Fake file icons

The Javascript looks from the end of the URL up to the last period to determine the file type. That is not always correct, because if the document is stored in a database, there will typically only be a query string such as docId=891199. In this case, if you know it is a PDF file, add a class to the <a> tag. The name of the class is link- and the file extension. Example: link-doc. Not all file extensions have icons, but the most common ones have.

Example: Fake PDF class. A class overrides the extension: RSS with XML extension.

Special classes

link-comment
Pointing to a user comment or discussion item. Discuss this article.
link-comments
Pointing to user comments. There are 11 comments.
link-external
Forces the link to show as external. Go away!
link-feed
A link that points to an RSS or ATOM feed. Add to your feeds.
link-folder
A link that points to a folder-like page. Go to directory of files.
link-newsitem
A link that points to a news item. Extra! Extra! Read all about it!.
link-parent
To be used to go one level up in the hierarchy. Go up.
link-plain
When you don't want an icon to show.
link-unknown
Any link that points to a page where the type isn't known and isn't HTML. See our manual on maintenance.
link-webpage
Links to HTML pages have no icon by default. If you want an icon, add the link-webpage class to the <a> element. Page on file icons.
link-user
When pointing to a user profile. See my MySpace space!
link-webcal
When pointing to a calendar item or event. Select a date.