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
- Inform about external link: http://www.externalsite.eu,
- External link to MS-Word document http://www.externalsite.eu/word.doc,
- No icon on link to Eionet site: http://rod.eionet.europa.eu,
- Inform about secure link: https://www.externalsite.eu,
- FTP links show as external: ftp://externalsite.eu,
- Inform about callto link: callto://externalsite.eu,
- Inform about mailto link: mailto:any@any.eu.
- Usenet news link: news:news.group.
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
- PDF document,
- Word document,
- Zip archive,
- Excel link,
- OpenDocument Text,
- Image,
- XML file,
- RSS feed
- Google Earth layer
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.
