Icons

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

Resource Icons

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

Social Bookmarking Icons

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

Sharing Icons

Also various modes of THL sharing. The following can be sourced, external link: 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. external link: 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. external link: 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)
external link: http://mashable.com/2007/08/22/facebook-favicons/

SOURCE: IF interested you can read more here: external link: 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: external link: http://buzzup.org/

SOURCE: external link: 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 external link: http://somerandomdude.net/srd-projects/sanscons/

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

80px x 15px Brilliant Button Maker. Make buttons like the RSS buttons on this page external link: 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…) external link: 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. external link: http://www.intersmash.com/300images/

Showing Hyperlink Cues with CSS. This is a specialty situation yet to be adopted by THL. external link: 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 external link: Tibetan and Himalayan Library