Enter jQuery… and voila!

• Word Document
• Excel Document
• PowerPoint Document
• PDF Document
• Zip File Link

The html looks like this:

<ul id="docsList">
  <li><a href="#document.doc">Word Document</a></li>
  <li><a href="#Excel-file.xls">Excel Document</a></li>
  <li><a href="#Powerpoint-pres.ppt">PowerPoint Document</a></li>
  <li><a href="#somefile.pdf">PDF Document</a></li>
  <li><a href="#Archive.zip">Zip File Link</a></li>
</ul>

The Javascript looks like this:

jQuery(document).ready(function() {
$('.docs a').attr('href');
// Word doc
$('a[href$=".doc"]').addClass('doc');
$('a[href$=".docx"]').addClass('doc');
$('a[href$=".docm"]').addClass('doc');
// Excel
$('a[href$=".xls"]').addClass('excel');
$('a[href$=".xlsx"]').addClass('excel');
$('a[href$=".xlsm"]').addClass('excel');
$('a[href$=".xltx"]').addClass('excel');
// PowerPoint
$('a[href$=".ppt"]').addClass('ppt');
$('a[href$=".pptx"]').addClass('ppt');
$('a[href$=".potx"]').addClass('ppt');
$('a[href$=".potm"]').addClass('ppt');
// PDF
$('a[href$=".pdf"]').addClass('pdf');
// ZIP
$('a[href$=".zip"]').addClass('zip');
});

Source code :

Dynamic Document Icons (source code)

HTML Code is below

<div class="yt_holder">
<h3>YouTube-Playlist</h3>
<div  id="ytvideo"></div>
<ul class="videos">
  <li class="first"><a title="This is a video long description..." 
href="http://www.youtube.com/watch?v=OtF1JFNfCug">Funny Crashes</a>
        </li>
  <li><a href="http://www.youtube.com/watch?v=bI7AUgp5fPI">Prank Wars</a></li>
  <li><a href="http://www.youtube.com/watch?v=Xgls9IwWUyU">Apple "i"</a></li>
</ul>
</div>

<!-- end yt_holder -->

CSS Code is below

.clearfix { zoom:1; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#ytvideo {
    float: left;
    margin-right:10px;
    padding-right: 10px;
    border-right: solid 1px #999;
}

.yt_holder {
    background: #ccc;
    padding: 0 10px 10px;
    border: 1px solid #e3e3e3;
    margin-bottom:15px;
}

.yt_holder h3 {
  margin:0; padding:5px 0; background: #ccc; font-weight:bold;
}

.yt_holder ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 75px;
}

.yt_holder ul li {
    list-style-type: none;
    display:block;
    float: left;
    width: 130px;
    overflow:hidden;
}

.yt_holder ul li img {
    display:block;
    width: 97px;
    border: 1px solid #999;
}
.yt_holder ul li a {
    padding: 5px 2px 5px 5px;
    text-decoration: none;
    display: block;
    color: #000;
    font-family:Arial;
    font-size:11px;
    border-top: solid 1px #999;
    background:#e0e0e0;
}
.yt_holder ul li a:hover { background:#fff; color:#e4721c; }

.yt_holder ul li.first a {border: none; }

body .yt_holder ul li.currentvideo a {
  background:#fff; font-weight:bold; color:#e4721c;
}