Adding file type icons to Moodle

In my previous post on ‘Adding files into a Moodle 2 content area’ I described how files can be added into the middle of text, so that they appear as links with a narration around them.

One downside of this, is that sometimes the links aren’t as obvious as they could be (depending on the theme being used and any personalisations to the CSS) – and also the student doesn’t know what type of file they are downloading – which when accessing on things like mobile devices, can be a useful piece of information.

Screenshot showing how icons are added before the hyperlinks to denote the file type So what I often do to make the links to files stand out , and to give the user an idea of what sort of file it is that they are downloading – I add the hyperlink on a separate line and add an icon before it to identify the file type. This improves the layout of the page, works really well on mobile devices and increases the usability considerably.

There are various sources of icons, your Moodle administrator should be able to locate the icons used by your system, so that they match – or I often use the following website, which helps search for creative commons icons:

Internet icon

Once you have your icons, you can keep adding the icon the same way that you add any other image, or another option which I have used with a few projects is to upload the icons to an area of webspace, then add this once to Moodle by adding an image by URL. I then set the ALT text (e.g. set this to “PowerPoint icon”, or “PDF icon”. I then go into the html view, and copy the piece of code that relates to that icon – and I paste this into a word document or similar. Then in the future when I want to re-use the icon, I can just go into the word document, copy the code for the desired icon, and paste this into the html editor in Moodle.

e.g. the code that I use to keep re-using the internet icon above looks something like:

Screen shot showing an example of the code can be added for each icon



This may sound a little complicated but it is actually a much quicker way of doing this, and you will know that everytime you add an icon, it will have the correct ALT text associated with it, which is really good for consistency and makes it a lot easier for a visually impaired learner to navigate around the area.

One Response

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: