cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Surveyor

Change One Bullet Point to a Checkmark

One of my favorite tools within Canvas is the HTML editor in the backend of a page, quiz, assignment, etc. Since one of my sites relies on bullet lists for navigation, I've been fussing with a way to get a checkmark next to the current unit. I figured it out a few minutes ago and wanted to share with others.

First, here is the look.

One Checkmark instead of the bullet.

The single checkmark next to the current unit requires using the HTML editor and modifying the <li>, adding a span around the checkmark HTML entity ( &#10003; ).

Here is the current code:

<li style="list-style-type: none !important;">

<span style="color: red; margin-left: -18px;">&#10003;</span>

<a title="U04 Dynamics Introduction" href="https://puhsd.instructure.com/courses/8/pages/u04-dynamics-introduction" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/8/pages/u04-dynamics-introduction" data-api-returntype="Page">

<span style="font-size: 1rem;">U04 Dynamics </span></a></li>

The li style removes the bullet point from the list. The !important is necessary to override the Canvas CSS.

The span moves the checkmark to the left and adds the color red.

The rest is nothing more than linking the text to the correct page.

While this isn't perfect on an iPhone, it's something that others might enjoy tinkering with as they design a page.

Maybe you could even come up with a cleaner way to change one bullet point to a checkmark. 

1 Reply
Highlighted
Community Coach
Community Coach

Hey this is nifty. I'm going to share. 

Thanks lph