Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 88 lines (72 sloc) 4.48 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS link icons pack</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="description" content="CSS-module that automagically adds icons to your hyperlinks depending on target file extension of uri scheme." />
<meta name="keywords" content="icons, textlinks, css, xhtml" />
<meta name="robots" content="all" />
<!-- CSS for the icons, this is what ypu are looking for -->
<link rel="stylesheet" type="text/css" media="screen" href="hyperlink_icons.css" />
</head>
<body>
<h1>Add icons to links with <acronym title="Cascading Style Sheet" xml:lang="en" lang="en">CSS</acronym> and a sprite image</h1>
<p>This is a "plugin" essentially consisting of an image (a sprite image) and a stylesheet for you to add nice little icons to the right of hyperlinks that lead to a file with a certain extension. Like <a href="#untitled.pdf">my non-existing pdf-file</a> for example. </p>
<h2>Installation</h2>
<p>For production, simply use the hyperlink_icons.css as a stylesheet and make sure that it is referencing the sprite.gif image correctly. This should make links look like the examples below:
</p>
<hr />
<div id="extensions">
<!-- Is this what you are looking for? -->
<h3>Extensions</h3>
<ul>
<li><a href="#untitled.doc">.doc</a> - <a href="#untitled.rtf">.rtf</a></li>
<li><a href="#untitled.txt">.txt</a></li>
<li><a href="#untitled.pdf">.pdf</a></li>
<li><a href="#untitled.xls">.xls</a></li>
<li><a href="#untitled.xpi">.xpi</a> <small>(Firefox Extension)</small></li>
<li><a href="#untitled.rss">.rss</a> - <a href="#untitled.atom">.atom</a></li>
<li><a href="#untitled.opml">.opml</a></li>
<li><a href="#untitled.vcard">.vcard</a></li>
<li><a href="#untitled.exe">.exe</a></li>
<li><a href="#untitled.dmg">.dmg</a> - <a href="#untitled.app">.app</a></li>
<li><a href="#untitled.pps">.pps</a></li>
<li><a href="#untitled.ical">.ical</a> <small>(changed)</small></li>
<li><a href="#untitled.jpg">.jpg</a> - <a href="#untitled.gif">.gif</a> - <a href="#untitled.png">.png</a> - <a href="#untitled.bmp">.bmp</a> - <a href="#untitled.svg">.svg</a> - <a href="#untitled.eps">.eps</a></li>
<li><a href="#untitled.swf">.swf</a> - <a href="#untitled.fla">.fla</a></li>
<li><a href="#untitled.css">.css</a></li>
<li><a href="#untitled.mp3">.mp3</a> - <a href="#untitled.wav">.wav</a> - <a href="#untitled.ogg">.ogg</a> - <a href="#untitled.wma">.wma</a> - <a href="#untitled.m4a">.m4a</a></li>
<li><a href="#untitled.zip">.zip</a> - <a href="#untitled.rar">.rar</a> - <a href="#untitled.gzip">.gzip</a> - <a href="#untitled.bzip">.bzip</a> - <a href="#untitled.ace">.ace</a></li>
<li><a href="#untitled.ttf">.ttf</a></li>
<li><a href="#untitled.mov">.mov</a> - <a href="#untitled.wmv">.wmv</a> - <a href="#untitled.mp4">.mp4</a> - <a href="#untitled.avi">.avi</a> - <a href="#untitled.mpg">.mpg</a></li>
<li class="new"><a href="#untitled.phps">.phps</a></li>
<li class="new"><a href="#untitled.torrent">.torrent</a></li>
</ul>
</div>
<div id="schemes">
<h3>e-Mail/Messaging <acronym title="Uniform Resource Identifier" xml:lang="en" lang="en">URI</acronym> schemes</h3>
<ul>
<li><a href="mailto:somebody@somedomain.tld">mailto:</a></li>
<li><a href="callto:USERNAME">callto:</a></li>
<li><a href="msnim:USERNAME">msnim:</a></li>
<li><a href="xmpp:USERNAME">xmpp:</a></li>
<li><a href="aim:USERNAME">aim:</a></li>
<li><a href="http://www.icq.com/0123456789">ICQ Link</a></li>
<li><a href="http://edit.yahoo.com/config/send_webmesg?.target=USERNAME&amp;.src=pg">YIM! Link</a></li>
<li><a href="skype:USERNAME">skype:</a></li>
<li class="new"><a href="gg:USERNAME">gg:</a></li>
</ul>
</ul>
<hr />
<div id="example">
<h3>Compatibility</h3>
<p>This <acronym title="Cascading Style Sheet" xml:lang="en" lang="en">CSS</acronym> module has been successfully tested in <br />
<strong>Firefox</strong> (<em>Mac &amp; PC</em>), <strong>Camino</strong>, <strong>Safari</strong>, <strong>Opera</strong> (<em>Mac &amp; PC</em>) &amp; <strong>Internet Explorer 7</strong> (6 doesn't work)</p>
</div>
<div id="footer">
<p>Icons by <a href="http://famfamfam.com/">famfamfam</a><br />
This work is licensed under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution License</a>.</p>
</div>
</body>
</html>