General developer forum

Icon Colours

Picture of Mark Ward
Icon Colours

I love the new icons included with Moodle and I think everyone would agree that they are a big improvement for the interface. That said I have found that, with all the icons being mid-grey, they can be lost against grey or dull background colours, something which is a particular problem where the icons are used on non-white space like the block headers.

Since the introduction of these new icons a couple of issues have popped up on including MDL-40582 and MDL-37231. With the much-improved support for web fonts in modern browsers there has been a move towards using fonts for icons rather than images on other web applications (Wordpress for example) and I was wondering whether there were any plans for a similar move with Moodle?

A quick overview:

 + All editing icons would load with single HTTP response for the one web font file.

 + Changing the colour of the icons would be as simple as applying a CSS rule.

 + Other CSS styling could be applied such as drop shadows.

 - Web fonts are not totally compatible with the current mechanism used to override default icons and images.

 - Changing one of these icons would be much more time consuming.

What are the current thoughts on this from Moodle HQ and from the broader community?

Average of ratings: -
Picture of Danny Wahl
Re: Icon Colours
Core developersPlugin developers

I'm not sure how the current font-icons are normally rendered, but I'm imagining that it's probably in a span or some other type of element.  If that's the case then it should be fairly simple to at least "overwrite" a font-icon with a normal image via CSS like:


Is that the best solution? maybe not, but it should work fairly easily.

Average of ratings: -