Need help? I've been developing websites for over 20 years and specialise in ExpressionEngine development and support Get in touch

Adding icons to a user download area

» Visit the Client Downloads support page

A quick tutorial on how to add icons to assets with Client Downloads.

Client Downloads usage

Here is an example template to display a user’s folders:

{exp:ajw_client_downloads:folder orderby="id"}

{if no_results}<p>There are no folders for this user</p><p>{/if}</p>



<table width="100%">
        {if no_assets}<tr><td colspan="5">There are no assets in this folder</td></tr>{/if}
        {assets orderby="title"}
        <tr class="{switch="one|two"}">
            <td><a href="{url}" class="icon icon-{extension}">{title}</a></td>


<p>The key part of this is the</p>

<pre><code>class="icon icon-{extension}"

added to the asset’s link. This creates a default icon class and then an additional class that varies depending on the asset’s extension.

We can then, along with a suitable icon library (I’ve used famfamfam’s silk icon set), use the following CSS:

.icon {
	padding: 3px 0 3px 24px;
	background: transparent url(../images/icons/unknown.png) no-repeat 0 3px;

.icon-folder {
	background: transparent url(../images/icons/folder.png) no-repeat 0 4px;

.icon-gif {
	background-image: url(../images/icons/gif.png);

.icon-zip {
	background-image: url(../images/icons/zip.png);

.icon-docx {
	background-image: url(../images/icons/doc.png);

.icon-xlsx {
	background-image: url(../images/icons/xls.png);

.icon-html {
	background-image: url(../images/icons/html.png);

.icon-pdf {
	background-image: url(../images/icons/pdf.png);

.icon-flv {
	background-image: url(../images/icons/swf.png);

to give a different icon based on the asset’s file type/extension.