You can (mostly). The problems are:
1. Only some of the edit icons are created via renderers, so it can look patchy
2. Some javascripts (e.g. the hide/show activities toggle) are looking for an img tag and fail if they don't find it
3. I'm not sure on how the accessibility stuff interacts with this, since the icons in that case are inside hyperlinks which will use the alt text for those that don't see the images.
Maybe for the last one you could put the alt text inside the i tag inside an .accesshide span?
David Scotson
Posts made by David Scotson
A quick sketch of changing the expand/collapse triangles:
.tree_item {background-image: none !important;}
.tree_item.branch:before { content: "\f078 ";}
.collapsed .tree_item.branch:before { content: "\f054 ";}
.dir-rtl .collapsed .tree_item.branch:before { content: " \f053";}
And I've just noticed that newer versions of Font Awesome have an "icon-fixed-width" class you can add when using icons like we do in Moodle so they line up neatly:
http://fortawesome.github.io/Font-Awesome/examples/#navigation
.tree_item {background-image: none !important;}
.tree_item.branch:before { content: "\f078 ";}
.collapsed .tree_item.branch:before { content: "\f054 ";}
.dir-rtl .collapsed .tree_item.branch:before { content: " \f053";}
And I've just noticed that newer versions of Font Awesome have an "icon-fixed-width" class you can add when using icons like we do in Moodle so they line up neatly:
http://fortawesome.github.io/Font-Awesome/examples/#navigation
I see this has been included in the latest master branch. I think it looks good (though I personally lean towards simply not having the icons there at all).
To make sure you've covered all the icons you can override the CSS that collapses the menus. This means as you browse around the site you'll immediately see any icons that aren't being converted correctly (either showing the standard icon, or simply a font-awesome icon that you'd prefer to change).
.jsenabled .block_navigation .block_tree .collapsed ul {display: block;}
.jsenabled .block_settings .block_tree .collapsed ul {display: block;}
I've not found any that have been missed yet, but they turn up in all sorts of odd corners.
Note that the expanding triangles are still the core images since they're applied in a different way. But since they're applied via CSS background images, it's relatively easy to get rid of them and use the same :before trick used to add navbar/breadcrumb seperators to add one of the Font Awesome icons via pure CSS. The tricky bit is getting them to line up so that it looks nice when you click and the two icons swap.
To make sure you've covered all the icons you can override the CSS that collapses the menus. This means as you browse around the site you'll immediately see any icons that aren't being converted correctly (either showing the standard icon, or simply a font-awesome icon that you'd prefer to change).
.jsenabled .block_navigation .block_tree .collapsed ul {display: block;}
.jsenabled .block_settings .block_tree .collapsed ul {display: block;}
I've not found any that have been missed yet, but they turn up in all sorts of odd corners.
Note that the expanding triangles are still the core images since they're applied in a different way. But since they're applied via CSS background images, it's relatively easy to get rid of them and use the same :before trick used to add navbar/breadcrumb seperators to add one of the Font Awesome icons via pure CSS. The tricky bit is getting them to line up so that it looks nice when you click and the two icons swap.
Works for me on the latest from Moodle_25 branch too.
It's working for me with the latest from the master branch, which reports that same version number (though I don't know if that only gets changed when a release is made.).