Hi,
I read that in the developper roadmap, its planned to update the default icon:
http://docs.moodle.org/dev/Developer_meeting_May_2012#Moodle_2.4_roadmap
I wonder the actual state of this task because we recently modify many icons for our custom theme and we could share the icons with the community.
Thanks.
At the meeting the icon set that they were leaning towards using was Tango: http://tracker.moodle.org/browse/MDL-14361
Can we see what icon set you are using?
We first started with the icons set used in the after burner theme but we added some of the icons based on silk and fugue icon set. We also have to modifiy some icons who arent not included in afterburner. We finally transform some icons from gif to png 24 to avoid the problem of white bordured icons. Thats these modifications that I would like to share. its simple but if it could help..
But now, after reading this page:
http://moodle.org/mod/forum/discuss.php?d=126543
The work that could be done could be far more complex that only replace the actual core icon.
I think if there is a willingness to review the entire system icons, the use of vector icons would be much better. In this case, the icons I wanted to share with you are useless. Otherwise, Let me know.
It sure would be nice if more icons in Moodle were sprites loaded via CSS. This would make it easier for theme designers to change the icons.
Also, when you say vector icons, do you mean font icons?. I highly recommend Font Awesome.
I'd certainly add my vote for either font- or SVG-based icons. If we're going to be seeing more devices with high DPI displays in the coming years, 16x16 bitmaps aren't going to cut it much longer!
I disagree. Dropping in a single image is a lot easier than rebuilding a whole sprite sheet.
It would lower http requests and decrease loading time- but I don't think it's easier. Also, how would you handle a new icon being added to the set, like a new mod or core feature?
Right, so the plan is to have individual svg file for each icon (neither sprite nor font). Here is the draft guidelines and open for feedback. Cheers!
Hello Barbara,
your work on new consistent icons is great and we really need this. The choosen basic colors are very strong like candys. I know, this looks modern and stylish, but I think we need in the next step a more decent set of icons.
You've presented the icon for the feedback module. Its a megaphone. From the character of the module it should be more like an ear. If we get a new forum module we can use the megaphone icon for a news and announcment forum.
ralf
+1 with mark for font or svg based.
nice article here from chris - http://css-tricks.com/html-for-icon-font-usage/
lovely font icon set - http://gregoryloucas.github.com/Font-Awesome-More/
I agree also with Stuart and Darcy that an svg/font icon solution would be best. Font-Awesome looks good.
Some other SVG icon packs that are open source:
I came across this font set the other day:
Given the specific nature of Moodle, it may be diffcult to map an existing set of icons to existing Moodle actions. A bespoke set of icons as suggested by Barbara Ramiro above is the correct way to proceed.
If you are interested in exploring icon development further, I would suggest reading 'The Icon Handbook' by Jon Hicks - http://www.fivesimplesteps.com/products/the-icon-handbook
He rendered the well known Firefox browser icon
regards,
Cathal.
Waterford Institute of Technology,
Waterford
Ireland.
Lots of talk on this spread across forums and tracker, but since this discussion is in the Future major features forum i figure this must be the most appropriate place to post a quick quiz!
Quick quiz/poll :
1. Do you consider icons to be :
a) content
b) accessibility aids
c) styling / usability aids
2. Lets forget moodle exists. If you were making a website or cms how would you add icons?
a) <a href=foo><img src=foo>foo</a>
b) <a href=foo class=foo>foo</a>
.foo { background:transparent url=foo ect...}
c) <a href=foo class=foo>foo</a>
.foo:before { font-family:foo; content=foo }
Cheers
stuart
Morning Stuart,
My thoughts on this are equal parts B and C.
It is because of B for instance that I am always concerned that the icon has a logical connection to it's purpose. The Pencil icon for settings has always annoyed me a little. An internationaly recognised symbol for settings is a gear, or gears. Would be nice to standardise this to make it more recognisable. Likewise, I see a megafone as the proposed icon for feedback. How are these two things combined?
Julian
This is how I add icons to links. There's probably a slightly better way to do this, and I'm going through my CSS practices just now to see what I can improve.
At the HTML level:
<a class="featureLink add" href="...">Add</a> <a class="featureLink edit" href="...">Edit</a> <a class="featureLink delete" href="...">Delete</a>
At the CSS level:
.featureLink {
background-repeat: no-repeat;
background-position: 0 50%;
padding-left: 20px;
}
.featureLink.add {
background-image: url([[pix:theme|icon-add]]);
}
.featureLink.edit {
background-image: url([[pix:theme|icon-edit]]);
}
.featureLink.delete {
background-image: url([[pix:theme|icon-delete]]);
}
I think accessibility has got to be included in thinking about icons. And I think accessibility is probably reduced when adding icons as backgrounds via CSS ...
I don't see a path clear enough to push changes into 2.4 ... It would be great to have all this decided for 2.5 though.
Hi Martin,
the answer to quiz question 1. (Do you consider icons to be) is c :
c) styling / usability aids
Icons cannot benefit accessibility, but when used correctly can benefit usability and make things look pretty.
I know from previous posts there is a great deal of confusion about the terms accessibility and usability with the two being used together and interchangeably on the forums by many people, so i'll set out the difference between accessibility and usability.
designing for accessibility on the web means enabling users with :
It your turning off css, there is probably a good reason - decorative inline icons will be an impairment rather than useful to you.
Decorative icons do not need the accessibility standards you would apply to images which provide content. Trying to make any decorative icon accessible (e.g. title, alt etc) is just adding noise.
You would as likely put a title and alt tag on a rounded corner as you would a decorative icon.
designing for usability of the web means enabling all users.
(yeh, that list is from wikipedia
Icons exist on the web to make things look nice and aid usability.
Hope this helps
Stuart
p.s. if you really need to check these things out http://webstandardssherpa.com/ is your friend and i found Greg https://moodle.org/user/profile.php?id=305966 to be a great source of advice too.
Hi Stuart,
I'm not very experienced with screenreader software but from the examples above, wouldn't a screenreader look at both the outer <a> and inner <img> tags and announce both to the user? If this is the case, the background image approach for presenting icon representations of "things" would be a better end user experience. The visually impaired user isn't recieving announcements about the "thing" on the page twice.
The <a> link is the important thing — the fact that it can be represented textually, pictorially or audibly is appealing to certain categories of users.
regards,
Cathal.
Waterford Institute of Technology
I should say, the other method of using a symbol font would work equally well. It doesn't affect the rendered markup, which is what screenreaders primarliy focus on.
regards,
Cathal.
Waterford Institute of Technology.
It appears there is no link here to the actual issue in the tracker. MDL-34080
Why are blocks and actions icon just gray? There are many themes with dark header blocks, so the "minus icon" and "move to dock" icon in a block doesn't look very well. Adding light background and border (MDL-36442) is just workaround.
Is is possible to have separate icon for blocks, e.g. white icons instead of grey?
As the icons are SVG's you can edit the colours them and add them to your theme. Ankit did a quick proof of concept to try and see if we could change the colours programatically within the Moodle interface. See Ankit's github.