Bootstrap/CSS for Course Design

Jump to solution
Community Contributor

Hi, everyone.

There are a few posts referencing Bootstrap/CSS that go back a few years, so trying to bubble this back up to the surface.

I'm reviewing CSS as a way to increase instructional design workflows, as well as make code more equitable and useful for our team.

Currently, I'm running into an issue with iconography from Bootstrap not being recognized in my styles.css file uploading to the beta theme editor. Wondering if anyone else out there is interested in working together to solve some issues that can be beneficial to the larger group? I'm not terribly worried about the placement of it yet, just the functionality of seeing it in action. (Eventually, I'd like to see the icon to the left of the text. Such as; [icon] Student Learning Objectives or [icon] Learning Materials.)

Thanks, in advance! I'm dropping my code - with a generic icon selected - below as to where things are at:


#StudentLearningObjectives {
    background-color: #d6d6d6 ;
@import url("");
.bi::before {
    display: inline-block;
    content: "";
    vertical-align: -.125em;
    background-image: url("data&colon;image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns=''><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;



Labels (2)
1 Solution
Community Contributor

I haven't tested this in Canvas but I wonder if it's not working because you needs to have `@import` be at the top of your CSS file. The documentation mentions this is being required:

View solution in original post