SUNY Downstate Health Sciences University
Office of Communications & Marketing
Using Link Icons in your Site
What are link icons?
Link icons are small, automatically generated glyphs that are used to visually identify various types of hyperlinks. For example, a link to a PDF file will be immediately identified as such by a small icon of a PDF immediately following the link.
Link icons are designed to only affect the body of the Downstate template.
The code was adapted from Iconize 0.5, by Poolie Studios.
The icon images must be located in the link_icons folder in the root-level images folder.
How to use link icons
Apply the stylesheet link_icons.css located in the root-level CSS folder by pasting the following link into the header of your template:
<link href="http://www.downstate.edu/css/link_icons.css" rel="stylesheet"
- External links
- NOTE: link must contain class="external" to for this to activate
- <a href="#.html" class="external">
- Popup windows
- NOTE: link must contain a target="_blank" attribute for this to activate.
- <a href="#.html" target="_blank">
- Email links
- Word documents
- Text documents
- PDF documents
- Excel documents
- PowerPoint presentations
- Movie files
- Audio files
- Image files
- RSS feeds
- Calendar items
- EXE applications
- Mac applications
- Flash movies
- Compressed files
- Stylesheet documents
To selectively deactivate the link icon
This can be desirable in certain circumstances, eg, image-based links to files.
Apply the style no-icon to the anchor tag of the link:
HTML Code Output <a href="myfile.pdf">My PDF file</a> My PDF file <a href="myfile.pdf" class="no-icon">My PDF file</a> My PDF file
At the time of writing, the most current verison of Adobe Dreamweaver CS3 is unable to correctly display the icons on-screen whilst in design mode. However, they are be visible when the page is previewed in a web browser.