.file-type-pdf {
    display:block;
    background-image:url(./images/pdf.gif);
    background-position:0 center;
    background-repeat:no-repeat;
    padding-left:20px;
}

Originally posted by marcandre at lastoctoberday.com

Edited with Error Correction and Approved by andrew

The Goal

When linking to a file for download, a nice way to jazz up the presentation of the link is to display the file type's icon alongside it. This gives the site visitor some clue as to what they're downloading, and makes the link stand out a bit more within the page:

By default, concrete5's file block simply displays a link to the file, without any icon. But adding this icon can be easily done with some quick modifications to the file block's view.php and controller.php files.

Override the File Block's View Template and Controller

First you have to create the folder 'file' in the blocks folder in your concrete5 root. Then copy the files 'view.php' and 'controller.php' from the /concrete/blocks/file/ folder in your newly created one. This will allow you to make changes to these two templates without affecting the core files.

Modify the Controller

Open the controller.php and add the following function to the end of the class:

function getFileExtension() {
    $f = $this->getFileObject();
    return $f->getExtension();
}

Modify the View

Now open the view.php and change the line 7 (the HTML link) to :

<a href="<?php echo View::url('/download_file', $controller->getFileID())?>"
    title="<?php echo stripslashes($controller->getLinkText())?>"
    class="file-type-<?=$controller->getFileExtension()?>">
        <?php echo stripslashes($controller->getLinkText())?>
</a>

As a result you will have the usual link, but now with a CSS selector you can use to add a file-type logo, like this style-sheet (case PDF) :

Now you have a filetype-logo with your file download in concrete5!