"Simple" JavaScript to allow for the replacement of Instructure icons with other Instructure icons. Don't like that rocket ship icon for quizzes? Make it the rubric! Confused by external links and external tools having the same icon? Change one!
Wait, can't this be done with basic CSS? Why overkill it with JavaScript? That's easy, Instructure updates the codepoints any time they add/remove/change a glyph, breaking prewritten CSS, which uses those codepoints to identify the glyph to render. This isn't a problem for Instructure, since their CSS gets updated when they compile a new release. However, that doesn't carry over to institution-level custom CSS.
This JavaScript will parse all stylesheets loaded to the DOM to identify all style rules matching icon-*:before
selectors. It uses the the character assigned to content
as the character corresponding to the icon name. Finally, it generates a new style
element and inserts new rules using the CSS selectors provided, the content
corresponding to the selector whose name corresponds to the name provided, and any comment you feel is appropriate for snooping eyes.
04/28/2023
- Initial Load
- Add the "Do Not Touch" functions to your global JavaScript's "Do Not Touch" section (assuming you have one)
- Add the "Config" variable to your global JavaScript's "Config" section
- Build out your custom icons list.
The initial script comes with 2 icons precustomized:
- Quizzes: Replaces the
quiz
icon with therubricdark
icon - External Tools: Replaces the
link
icon with theexternallink
icon
The configuration is pretty simple:
- CSS selector to apply the icon to
- Icon name as it appears in the Instructure CSS
- (Optional) Comment
Layout
[1, 2, 3]
Example
['.context_module_item.context_external_tool .icon-link::before', 'external-link', 'Window w/ Arrow Out (externallink)'],
['.icon-quiz:before, .icon-quiz.icon-Solid:before', 'rubric-dark']
Rendered CSS
.context_module_item.context_external_tool .icon-link::before { content: "\EA77"; /* Window w/ Arrow Out (externallink) */ }
.icon-quiz:before, .icon-quiz.icon-Solid:before { content: "\EB0F"; }