The Tibetan and Himalayan Library

Icons

<h3 class="heading-h6"><a name="THLToolboxhomegtDevelopersZonegtIcons" class="anchorpoint"></a><a href="/tools/wiki/home.html">THL Toolbox</a> > <a href="/tools/wiki/Developers%27%20Zone.html">Developers' Zone</a> > Icons</h3> <h3 class="heading-h1"><a name="UseofIconsinTHL" class="anchorpoint"></a>Use of Icons in THL</h3>Contributor(s): Mark FerraraTHL offers standardized icons for use in its web sites, thereby enabling users and editors to easily move across its various tools and publications. <h3 class="heading-h2"><a name="EndUserIcons" class="anchorpoint"></a>End User Icons</h3> <ul class="star"><li>Show: + with square</li> <li>Hide: - with square</li></ul> <h3 class="heading-h2"><a name="ResourceIcons" class="anchorpoint"></a>Resource Icons</h3>We are in the process of standardizing icons for listing affiliated resources in a given application:<ul class="star"><li>3D Model: This is an image of a bar graph actually, but suits this purpose <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-3D.gif" border="0"/></li> <li>Audio recording: This is an image of a speaker with sound coming out <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-audio.gif" border="0"/></li> <li>Bibliography: This is an image of a piece of paper with text on it <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-bibliography.gif" border="0"/></li> <li>Dictionary terms: Well, this is a letter A set as a dropcap among some text <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-dictionary-terms.gif" border="0"/></li> <li>Events: There is a flag waving in the wind <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-events.gif" border="0"/></li> <li>General Resources link: this is in images of three nested photos, and we use it for general link to all media in MMS. See: <img src="/" alt="external link: " title="external link"/><a href="http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png," target="rwikiexternal">http://www.famfamfam.com/lab/icons/silk/previews/index_abc.png,</a> it is called "pictures".</li> <li>Home: This is an image of a house <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-home.gif" border="0"/></li> <li>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. <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-i-map.gif" border="0"/></li> <li>Map: This is an image of the earth <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-map.gif" border="0"/></li> <li>Media: This is an image of stacked pictures, tentatively to be used for media in general <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-media.gif" border="0"/></li> <li>People: This is an image of two people <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-people.gif" border="0"/></li> <li>Photograph: This is an image of a camera <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-photo.gif" border="0"/> see Sera feature entries.</li> <li>Places: This is a photograph of a mountain in a landscape <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-places.gif" border="0"/></li> <li>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… <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-panorama.gif" border="0"/> see Sera feature entries.</li> <li>Report: This is an image of a report, the cover is slightly opened <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-report.gif" border="0"/></li> <li>Search: This is an image of a magnifier <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-search.gif" border="0"/></li> <li>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.</li> <li>Text: This is an image of a piece of paper with text on it <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-text.gif" border="0"/></li> <li>Tibetan Text: This is the tibetan text for Tibet <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-tibet-text.gif" border="0"/></li> <li>Video recording: This is an image of a roll of film, as in movie/video <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-video.gif" border="0"/></li></ul> <h3 class="heading-h2"><a name="SocialBookmarkingIcons" class="anchorpoint"></a>Social Bookmarking Icons</h3>Then there are social bookmarking icons encouraging people to share THL pages with others: <ul class="star"><li>Buzz up!: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/social/icon-buzz-up.gif" border="0"/> (This website looks like crap to me!)</li> <li>Facebook: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/social/icon-facebook.gif" border="0"/></li> <li>digg: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/social/icon-digg.gif" border="0"/><img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/social/icon-digg-button.gif" border="0"/></li> <li>del.icio.us: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/social/icon-delicious.gif" border="0"/></li> <li>Email: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-email.gif" border="0"/></li></ul> <h3 class="heading-h2"><a name="SharingIcons" class="anchorpoint"></a>Sharing Icons</h3>Also various modes of THL sharing. The following can be sourced, <img src="/" alt="external link: " title="external link"/><a href="http://web.forret.com/tools/podicons.asp" target="rwikiexternal">http://web.forret.com/tools/podicons.asp</a>RSS: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-rss.gif" border="0"/><img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/rss-xml-feed.png" border="0"/>Podcast: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/rss-podcast.png" border="0"/>- Video: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/video/rss-video.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/video/rss-videomov.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/video/rss-videomp4.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/video/rss-videoqt.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/video/rss-videowmv.png" border="0"/>- Audio: <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/audio/rss-audio.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/audio/rss-audiomp3.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/audio/rss-audiomp4.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/audio/rss-audioram.png" border="0"/> <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/podcasts/audio/rss-audiowma.png" border="0"/> <h3 class="heading-h2"><a name="EditorialInterfaceIcons" class="anchorpoint"></a>Editorial Interface Icons</h3>Content forthcoming. <h3 class="heading-h2"><a name="AvailableIcons" class="anchorpoint"></a>Available Icons</h3>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. <img src="/" alt="external link: " title="external link"/><a href="http://www.famfamfam.com/lab/icons/silk/" target="rwikiexternal">http://www.famfamfam.com/lab/icons/silk/</a> - 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. <img src="/" alt="external link: " title="external link"/><a href="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%20Collections/ICONS/famfamfam_silk_icons_v013.zip" target="rwikiexternal">https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%20Collections/ICONS/famfamfam_silk_icons_v013.zip</a>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:<ul class="minus"><li>Interesting social sharing networking tools THL may want to include?</li></ul> 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) <img src="/" alt="external link: " title="external link"/><a href="http://mashable.com/2007/08/22/facebook-favicons/" target="rwikiexternal">http://mashable.com/2007/08/22/facebook-favicons/</a>SOURCE: IF interested you can read more here: <img src="/" alt="external link: " title="external link"/><a href="http://sharethis.com/poweredby" target="rwikiexternal">http://sharethis.com/poweredby</a>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: <img src="/" alt="external link: " title="external link"/><a href="http://buzzup.org/" target="rwikiexternal">http://buzzup.org/</a>SOURCE: <img src="/" alt="external link: " title="external link"/><a href="http://www.addthis.com/" target="rwikiexternal">http://www.addthis.com/</a> <h3 class="heading-h2"><a name="USINGICONSinyourwebpage" class="anchorpoint"></a>USING ICONS in your webpage</h3>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. <h3 class="heading-h2"><a name="AdditionalResources" class="anchorpoint"></a>Additional Resources</h3>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 <img src="/" alt="external link: " title="external link"/><a href="http://somerandomdude.net/srd-projects/sanscons/" target="rwikiexternal">http://somerandomdude.net/srd-projects/sanscons/</a>Geographic/Navigation icon graphics - For Sale (NOT Free) <img src="/" alt="external link: " title="external link"/><a href="http://www.sibcode.com/stock-icons/navigation-icons.htm" target="rwikiexternal">http://www.sibcode.com/stock-icons/navigation-icons.htm</a>80px x 15px Brilliant Button Maker. Make buttons like the RSS buttons on this page <img src="/" alt="external link: " title="external link"/><a href="http://www.lucazappa.com/brilliantMaker/buttonImage.php" target="rwikiexternal">http://www.lucazappa.com/brilliantMaker/buttonImage.php</a>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…) <img src="/" alt="external link: " title="external link"/><a href="http://vandelaydesign.com/blog/design/free-icons/" target="rwikiexternal">http://vandelaydesign.com/blog/design/free-icons/</a>300 icons from 1800 sites - These icons are not for use, they are for example really, an inspiration for your own icon design ideas. <img src="/" alt="external link: " title="external link"/><a href="http://www.intersmash.com/300images/" target="rwikiexternal">http://www.intersmash.com/300images/</a>Showing Hyperlink Cues with CSS. This is a specialty situation yet to be adopted by THL. <img src="/" alt="external link: " title="external link"/><a href="http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html" target="rwikiexternal">http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html</a> .<hr class="line"/>BELOW IS A SAMPLE ONLY - OF THE "FAMFAM" ICON COLLECTION - Letter A through H - <img src="https://collab.itc.virginia.edu/access/content/group/c06fa8cf-c49c-4ebc-007f-482de5382105/Image%2520Collections/ICONS/icon-index-abc.gif" border="0"/> <h3 class="heading-h6"><a name="ProvidedforunrestrictedusebythespanclassnobrimgsrcsakairwikitoolimagesicklearrowgifaltexternallinktitleexternallinkahrefhttpwwwthliborgtargetrwikiexternalTibetanandHimalayanLibraryaspan" class="anchorpoint"></a>Provided for unrestricted use by the <img src="/" alt="external link: " title="external link"/><a href="http://www.thlib.org" target="rwikiexternal">Tibetan and Himalayan Library</a></h3>

THL Home	About Us THL Overview First-Time Visitors Guide to Resources How to Cite Help Participation & Support Sponsors Status Reports THL URLs Contact Us
Collections	Multimedia Audio & Video Archive Images Maps Texts
Reference	Bibliographies Finding Aids Knowledge Maps Place Dictionary Transliteration Tibetan Dictionary Tibetan Translation Tool Tibetan-Phonetics Converter Tibetan-Wylie Converter
Places	Cultural Geography Interactive Map Maps Nepal Census Data Place Dictionary
Literature	Tibetan Canons Kangyur/Tengyur Collected Tantras of the Ancients Dilgo Khyentsé Catalog Literary Genres
Community	Social Connections Blogs Collaboration Worksites Communication Discussion Forums Events Mailing Lists THL Partners Tibetan News
Tools	Toolbox Prep Computer Software Technologies THL Research Lab Fonts:(Chinese Diacritics Nepali Tibetan )
Projects	Antiquities of Zhangzhung Drepung Monastery JIATS Meru Nyingpa Monastery Sera Monastery Projects Inventory Status Reports

THL Home	About Us THL Overview First-Time Visitors Guide to Resources How to Cite Help Participation & Support Sponsors Status Reports THL URLs Contact Us
Collections	Multimedia Audio & Video Archive Images Maps Texts
Reference	Bibliographies Finding Aids Knowledge Maps Place Dictionary Transliteration Tibetan Dictionary Tibetan Translation Tool Tibetan-Phonetics Converter Tibetan-Wylie Converter
Places	Cultural Geography Interactive Map Maps Nepal Census Data Place Dictionary
Literature	Tibetan Canons Kangyur/Tengyur Collected Tantras of the Ancients Dilgo Khyentsé Catalog Literary Genres
Community	Social Connections Blogs Collaboration Worksites Communication Discussion Forums Events Mailing Lists THL Partners Tibetan News
Tools	Toolbox Prep Computer Software Technologies THL Research Lab Fonts:(Chinese Diacritics Nepali Tibetan )
Projects	Antiquities of Zhangzhung Drepung Monastery JIATS Meru Nyingpa Monastery Sera Monastery Projects Inventory Status Reports

Tibetan and Himalayan Library - THL

Search

Toolbox Home

THL Toolbox

About Tools

General Links

THL Home

THL Apps

THL Navigation

THL Information

THL Connections

Upcoming Events

Subscribe: THL Updates

Support: Donate to THL

THL Help