Find A PhysicianHome  |  Library  |  myDownstate  |  Newsroom  |  A-Z Guide  |  E-mail  |  Contact Us  |  Directions

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="" rel="stylesheet"
type="text/css" />

Available icons

  • 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
  • V-cards
  • 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

Current issues

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.