THL Toolbox > Developers' Zone > Icons

Use of Icons in THL

Contributor(s): Mark Ferrara

THL offers standardized icons for use in its web sites, thereby enabling users and editors to easily move across its various tools and publications.

End User Icons

• Show: + with square
• Hide: - with square

Resource Icons

We are in the process of standardizing icons for listing affiliated resources in a given application:

• 3D Model: This is an image of a bar graph actually, but suits this purpose
• Audio recording: This is an image of a speaker with sound coming out
• Bibliography: This is an image of a piece of paper with text on it
• Dictionary terms: Well, this is a letter A set as a dropcap among some text
• Events: There is a flag waving in the wind
• General Resources link: this is in images of three nested photos, and we use it for general link to all media in MMS. See: http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png, it is called "pictures".
• Home: This is an image of a house
• Interactive Map: This is an image of the earth with an arrow pointing outward in each corner. This icon was synthetically created from the earth/map icon by adding arrows.
• Map: This is an image of the earth
• Media: This is an image of stacked pictures, tentatively to be used for media in general
• People: This is an image of two people
• Photograph: This is an image of a camera see Sera feature entries.
• Places: This is a photograph of a mountain in a landscape
• QTVR Panoramic image: This is an image with a circular arrow with a picture. I actually combined two famfam icons to make this. It would be a good idea perhaps to just use the green circular arrow without the picture to maintain more consisteny of size… see Sera feature entries.
• Report: This is an image of a report, the cover is slightly opened
• Search: This is an image of a magnifier
• Source: in the sense of specifying the source of an item, such as articles used to prepare a description, etc. This could be an oral source too. However we should just use a small book picture to convey "lookup", etc.
• Text: This is an image of a piece of paper with text on it
• Tibetan Text: This is the tibetan text for Tibet
• Video recording: This is an image of a roll of film, as in movie/video

Social Bookmarking Icons

Then there are social bookmarking icons encouraging people to share THL pages with others:

• Buzz up!: (This website looks like crap to me!)
• Facebook:
• digg:
• del.icio.us:
• Email:

Sharing Icons

Also various modes of THL sharing. The following can be sourced, http://web.forret.com/tools/podicons.asp

RSS:

Podcast:

- Video:

- Audio:

Editorial Interface Icons

Content forthcoming.

Available Icons

The main source for the following icons is a famous open source collection of 700 icons called famfam made available under the Creative Commons Attribution 2.5 License. http://www.famfamfam.com/lab/icons/silk/ - ALL ICONS ARE 16px by 16px square and if odd shaped the icon has a transparent background to permit posting it on any color background. All icons are GIF image files except the podcast buttons which are PNG. All of the famfam image files are PNG but the ones with transparent backgrounds should be converted to GIF to support the older Internet Explorer 6 browser.

There will continue to be icons needed that don't exist below. Then you return to browse the complete library of famfam icons -

You can review the complete famfam icon collection in the zip file at the following link. Refer to this library for individual icons. https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image Collections/ICONS/famfamfam_silk_icons_v013.zip

At the BOTTOM of this very page you can see a sampling of the icons displayed as one big image file to permit the labels to show.

NOTE Although there are other icon resources listed lower on this page, limiting the variety of "ICON Collections" you sample from will maintain a uniformity in design, and simplify attributing credits. Therefore let's try to use famfam's library of icons and if necessary, then go elsewhere for icons, or design one from scratch, or modify an existing icon.

NOTES:

• Interesting social sharing networking tools THL may want to include?

TWO organizational methods for grouping social networking links are available. We should choose one or the other…

Share This
EXAMPLE: This following website has green link halfway down on the left for "Share This" (click or hover)
http://mashable.com/2007/08/22/facebook-favicons/

SOURCE: IF interested you can read more here: http://sharethis.com/poweredby

Add This
This one is also for consideration: EXAMPLE: See link called BOOKMARK on the following website - just hover on Bookmark button with white cross: http://buzzup.org/

SOURCE: http://www.addthis.com/

USING ICONS in your webpage

To grab an icon from this page just right-Click on the one you want and save the file onto your PC. The PNG files with transparency need to be converted to GIF file format, and also renamed to match the THL naming convention you can determine from referring to existing THL ICON files.

You can use the icons in your code one of twp ways; with an image tag, or as a CSS background image. The linking method will be different in all cases. The social networking icons especially have to be determined still.

IMG TAG: What is important mainly is that you add a descriptive text, and close that "img" tag. "left-bracketimg src="FILE" rel="View Image" /right-bracket"

CSS BACKGROUND: Here you want set the icon to the left or right of some text. The only that is special to add int his case is sufficient CSS "padding" on the side of the you position the icon image. All are 16px except for the "panorama" and the button images in podcast section. In this example the style is positioning the icon to the left and since the icon is 16px wide I am suggesting an approx padding of 20 to allow 4 extra pixels for spacing betweent he icon and the text. "{ padding-left:20px; background: transparent url(…path/fil-name.gif) no-repeat left center; }"

Here is an example of how the "email icon" is used as a background:

HTML: <a class="safe-contact" href="javascript:linkTo_UnCryptMailto('encrypted-email-address-goes-here');">Contact Us</a>

CSS: For more details about positioning, etc in this case see the main THL stylesheet and refer to the style called "safe-contact' background:url(/global/images/icon-email-go.png) no-repeat left -2px;

Examples On the DONATIONS page on the THL website you can see two examples of icons in practice in the wiki: Donations and Email links.

Additional Resources

ICONS and various graphics for inspiration to make your own can be found at the following websites. Note the degree of credit required for "FREE" icons. They do often require a visible link to the icon's website which would not be worth it in most cases for THL's website.

Monochromatic icons, choose your color http://somerandomdude.net/srd-projects/sanscons/

Geographic/Navigation icon graphics - For Sale (NOT Free) http://www.sibcode.com/stock-icons/navigation-icons.htm

80px x 15px Brilliant Button Maker. Make buttons like the RSS buttons on this page http://www.lucazappa.com/brilliantMaker/buttonImage.php

IF you need to look beyond famfam and can't make your own easily - 31 Sources of Quality, Free Icons (PLEASE note the details in copyright crediting protocols…) http://vandelaydesign.com/blog/design/free-icons/

300 icons from 1800 sites - These icons are not for use, they are for example really, an inspiration for your own icon design ideas. http://www.intersmash.com/300images/

Showing Hyperlink Cues with CSS. This is a specialty situation yet to be adopted by THL. http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html .

BELOW IS A SAMPLE ONLY - OF THE "FAMFAM" ICON COLLECTION - Letter A through H -

Provided for unrestricted use by the Tibetan and Himalayan Library