Replacing Learn iconography with SVG

Discussion created by rsrleeds on Jul 25, 2018

There isn't any other way to say this. Icons in Blackboard are a hodge-podge - gifs, jpgs, pngs, utilicons, fontawesome embedded fonts and at least three historic overrides in the CSS.


I've set us on a path here at Leeds to resolution independence and ideally, complete replacement of the Blackboard icons with SVG.


I'm targeting IE11, Edge, Firefox current, Chrome current, and Safari current with these modifications. And yes, I know we are pushing the capabilities of some our our customer's browsers, but as we have a more or less reasonably well managed desktop on campus we felt the time had come to take (drag??) people with us.


For what it's worth, I'm still using a monolithic mods.css file at Leeds - because at present it's the most efficient way for me to work. I don't have access to the BB filesystem, so our Unix guy has pointed a css include at a location on the content collection. This appears pretty performant on our system, and lets me fettle the Blackboard css without admin overhead.


The first First one:


The logout button, here shown at 100%

Screenshot_2018-07-25 Minerva Home – Blackboard Learn.png


And, demonstrating the benefit of resolution independence - here at 150%

Screenshot_2018-07-25 Minerva Home – Blackboard Learn(1).png


Here's the CSS I'm using:


/* Swap out the power icon for an SVG */


.global-nav-bar a.logout-link {

    background-image: url('/bbcswebdav/institution/CSS/icons/power_selected.svg')!Important;

    background-position: left!Important;

    margin: 4px;

    background-color: transparent;

    height: 18px;

    width: 18px;

    background-size: 18px 18px;




My css has *evolved*, and it might not be the prettiest, the best or only way to do this, but it seems to work well across our target browsers. If you can see a better, more efficient or just cooler way of writing this, I'm all ears.


Here's the icon file, created from Font Awesome Free, so there are no licensing issues with this one:


I'm hoping folks interested in pursuing SVG iconography in Learn will engage here. I've swapped out 90% of the student facing icons in our installation with SVG so when I've got time I'll add those here to this thread.  If you have embarked on something similar, it would be useful to swap tips and techniques.


Stuart, Leeds.