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.
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:
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:
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.