Crafting beautiful & functional websites since 2005

How to customise the default file icons in Drupal 7

9th August 2012

This quick tutorial will show you how to replace the default Drupal 7 file icons (the icons shown in the default rendered "file" field output).

Firstly, we need to copy the default folder of icons in to our theme which we can then replace with our new icons. This can be found in "modules/file/icons". Copy and paste this folder in to your theme folder e.g. "sites/all/themes/MYTHEME/images".

In the theme template.php file (if you don't already have one of these, create one now) we're going to use the theme_file_icon function to replace the path to the icons the module looks for. I have done this below:

function MYTHEME_file_icon($variables) {
  $file = $variables['file'];
  $icon_directory = drupal_get_path('theme', 'MYTHEME') . '/images/icons';

  $mime = check_plain($file->filemime);
  $icon_url = file_icon_url($file, $icon_directory);
  return '<img alt="" class="file-icon" src="' . $icon_url . '" title="' . $mime . '" />';
}

As you can see, I have altered the $icon_directory from...

$variables['icon_directory'];

to...

drupal_get_path('theme', 'MYTHEME') . '/images/icons';

Remember to change "MYTHEME" to the system name of your theme and make sure the path points to the correct folder in your build. Once you have cleared the Drupal cache you should be able to see your new icons in place of the old!

It is also very easy to alter the outputted HTML of the default rendered "file" field output using the theme_file_link function. This enables you to add extra attributes (e.g. classes) and rewrite the HTML output of the link. As with the function above, copy and paste it in to your template.php file and rename the function MYTHEME_file_link.

Hurrah! Customised file links for your site!

Tags: 
Drupal 7

Comments

Awesome! really thanks, althought I wanted to alter the file field output, your last comment at the end of this article save my life. Also Im going to try the icon changer thing too.

You rock!

Brilliant. Thank you very much. This is the best tutorial on this issue. Eventually i'd like to create a module which overrides the default icons as they are tiny and ugly.

Also got to say very nice, neat and minimalistic site. I've downloaded that font you've used as it's lovely. Really grabs the users attention.

Many thanks again.

Nice article. thanks
It helped a lot

Excellent, thanks a ton for posting on Drupal Answers and leading me to this solution!

Hi, this is a great article and very useful. I just wanted to point out that since you didn't really change the code from what was in theme_file_icon much you could simplify this (for your case) by simply overriding it in your theme template and then modifying $variables['icon_directory'] and returning theme_file_icon($variables).

However, if you wanted to change other things you would of course, do what you did and add custom classes or change other things about the img tag that is generated.

So your override function would look like this:
function MYTHEME_file_icon($variables) {
$variables['icon_directory'] = drupal_get_path('theme', 'MYTHEME') . '/images/icons';
return theme_file_icon($variables);
}

It just cuts down on code duplication a bit.

Thanks for the input, hopefully your comment will help others that stumble upon this post :)

As I pointed out in my answer at http://drupal.stackexchange.com/questions/4221/how-to-change-file-field-..., it is not necessary to copy all of the default icons to your theme directory, since you can modify the file_icon_path only when needed.

function mytheme_file_icon($variables) {
$file = $variables['file'];
$icon_directory = $variables['icon_directory'];

$mime = check_plain($file->filemime);

if ($mime == 'text/x-bibtex') {
$icon_directory = drupal_get_path('theme', 'mytheme') . '/images';
}

$icon_url = file_icon_url($file, $icon_directory);
return '<img class="file-icon" alt="" title="' . $mime . '" src="' . $icon_url . '" />';
}

Cheers for the input, hopefully this will help others too :)

Hey,I wrote a module just for this: https://www.drupal.org/project/file_field_icons

Add new comment

This is so I can get in touch with you if your comment warrants it - it will not be displayed publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.